首页 > 其他分享> 文章详细

css-浮动

2021-11-13 20:02:37 阅读：119 来源： 互联网

标签：浮动排列元素 height 文档 background css

浮动

1.文档流

文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

2.浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

3.浮动盒子的排列方式：

- none: 默认值，不浮动，为常规流

- left: 靠上靠左排列

- right: 靠上靠右排列

4.浮动特征

1.块在一排显示；
2.内联元素支持宽高；
3.无论是块元素还是内联元素，没有宽度时默认内容撑开宽度；
4.脱离文档流；
5.提升层级半级。

5.浮动的其他影响

1.对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素的顶端。
2.对普通元素的影响：浮动元素会从文档正常流中删除，使得紧挨它的元素位置发生偏移，影响布局。
3.对文字的影响：浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。

6.清除浮动的方法

1.使用带clear属性的空元素
在浮动元素后使用一个空元素，并在CSS中赋予clear属性即可清理浮动。
2.使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden或者overflow:auto即可以清除浮动。

3.使用CSS的:after伪元素

一个简单例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #father{
            width: 700px;
            height: 30px;
            background: lightblue;
            margin: 100px auto 0;
        }
        #son1{
            width: 500px;
            height: 100%;
            background: lightcoral;
            /*display: inline-block;*/
            float: left;
        }
        #son2{
            width: 100px;
            height: 100%;
            background: lightgreen;
            /*display: inline-block;*/
            float: left;
        }
    </style>
</head>
<body>
    浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    文档流是从上往下 一个一个排列
    而浮动之后脱离了原来的文档流
    <div id="father">
        <div id="son1"></div>
        <div id="son2"></div>
    </div>
</body>
</html>

标签：浮动,排列,元素,height,文档,background,css
来源： https://www.cnblogs.com/tanghuijun/p/15549550.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9