总结浮动元素float知识点。

浮动元素float

css布局的三种机制

分别是普通流（标准流）、浮动和定位

1.标准流

块级元素会独占一行从上向下排列。
行内元素会按照顺序排列，从左往右排碰到父级元素则会自动换行

2.浮动

让盒子从普通流中浮起来，主要让多个块级盒子一行显示

3.定位

将盒子定在浏览器的某个位置

浮动

为什么需要浮动？
它可以实现多个元素一行显示，而之前学的行内块（inline-block）也可以实现但会有空白间隙，也不可以实现空盒子左右对齐
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFmTCO6X-1599651046012)(C:\Users\HP\AppData\Local\Temp\1599641844376.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdoeGdf5-1599651046014)(C:\Users\HP\AppData\Local\Temp\1599641852703.png)]

什么是浮动？(float)
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，根据指定移动位置。
作用：1让多个盒子(div)水平排列成一行，功能强大使浮动称为布局的重要手段
2.可以实现盒子的左右对齐
3.浮动可以控制图片，实现文字环绕效果

语法：选择器{float：属性值}
none 元素不可浮动（默认）
left 元素向左浮动
right 元素向右浮动

特点：

float属性会让盒子漂浮在标准流上，可以盖住标准流的元素
float浮动把自己原来的位置给了下面标准流的盒子，不占原来位置
float浮动会改变元素的display属性，任何元素都可以浮动，浮动的元素会生成一个块级框。

float扩展

浮动元素与父元素的关系

子盒子和浮动参照父盒子对齐
不会和父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个是兄弟盒子是浮动的，那么会当前盒子与前一个盒子的顶部对齐，如果是普通流，那么当前盒子会显示在前一个兄弟盒子下方
浮动只会影响当前或者是后面的标准流盒子，不会影响前面的标准流。

为什么要清楚浮动呢

父级盒子很多情况下，不方便给予高度，但是盒子浮动不占位置，父级盒子的高度也就成了0，影响了下面的标准流盒子。准确地说不是清楚浮动而是清楚浮动对后面的产生的影响

清楚浮动的方法

clear属性用于清楚浮动
语法：选择器{clear：属性值}
left： 不允许左侧有浮动元素
right：不允许右侧有浮动元素
both：同时清楚左右两侧的浮动的影响

1.额外标签法
在浮动元素的尾部添加一个空的标签。
如

    <div>
        <div style="clear: both;"></div>
   </div>

优：书写方便
缺：添加许多毫无意义的标签，结构化比较差劲

2.父级添加overflow属性
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

.div{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden} 
.div-left,.div-right{width:180px;height:100px;border:1px solid #00F;background:#FFF} 
.div-left{ float:left} 
.div-right{ float:right} 

优点：代码简洁、
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏。

3.使用after伪元素清楚浮动

.clearfix:after { content: ""; display: block; height: 0; clear: both;
visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4.使用双伪元素清除

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

优点：代码简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。