css清除浮动

浮动产生的问题：

 若是父容器的高度为auto，而不是定值，在给子元素设置浮动后，父容器的高度会塌陷，不能被子元素的高度撑开，为了解决这一问题会进行清除浮动

清除浮动的方法：

一、给父容器设置固定的height值，此方法不适用于浮动元素高度不肯定的状况

二、添加额外标签，给浮动的元素后面添加一个clear属性的空标签

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

缺点：会增长无心义的标签

三、添加一个带clear属性的<br/>标签，方法与2相似

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

四、给父容器添加overflow:hidden;

.box {
   overflow:hidden;    
}
.box .son{
   float:left;
}

五、给浮动元素的父容器也添加浮动，可是在这样又会影响父容器相邻元素的布局

六、给父元素设置display:inline-block;或display:table;可是盒模型属性改变会致使一系列问题

七、给浮动元素的父容器添加一个clear属性的::after伪元素，IE6-7不支持伪元素，使用 zoom:1触发 hasLayout

.clearfix::after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
.clearfix { *zoom:1; }

小结：

一、经过clear属性清除

二、经过触发BFC（块级格式化上下文）

 推荐：使用::after伪元素

拓展：

一、BFC概念：具备BFC特性的元素能够看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，能够把BFC理解为一个封闭的大箱子，箱子内部的元素不管如何翻江倒海，都不会影响到外部。

在定位体系中属于标准文档流（另外两种定位体系为浮动和绝对定位）

二、触发BFC：只要知足下面任意一条便可触发

①body根元素

②浮动元素：float除none之外的值

③绝对定位元素：psition:absolute;

④display为inline-block、table-cells、flex

⑤overflow除了visible之外的值（hidden、auto、scroll）

 三、BFC特性及应用

①同一个BFC下外边距会发生折叠（两个块级元素的距离为margin大的值）；若是想要避免外边局的重叠，能够将其放在不一样的BFC容器中

②BFC能够包含浮动的元素（清除浮动）

正常状况下，浮动会脱离标准文档流，父级容器高度会塌陷

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

因为容器内元素浮动，因此容器只剩下2px的边距高度。若是触发容器的BFC，那么容器将会包裹着浮动的元素

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>     
</div>

③BFC不与浮动元素重叠

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

这时候其实第二个元素有部分被浮动元素覆盖（文本不会被覆盖）若是想避免元素覆盖，可触发第二个元素的BFC特性，在第二个元素中加入overflow:hidden;