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;