清除浮動的三種方式及其原理

浮動元素的特性

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

浮動元素帶來的問題

因為浮動元素脫離文件流，所以對於其處於正常文件流中父元素，無法獲知其高度，導致父元素自身的高度塌陷（失去浮動元素佔據的高度）。

清除浮動的三種方式

設定float

<div style="float: left;">
    <div style="float: left;">son div</div>
</div>

overflow:hidden;

<div style="overflow:hidden;
 
zoom:1;">
    <p style="float: left;">使用overflow:hidden 清除浮動</p>
</div>

其中，zoom:1;用於相容IE6。

clear:both;

<style>
.clearfix:after{
    /*START 真正起到清除浮動的程式碼*/
    content: '';
    display: block;
    clear: both;
    /*END 真正起到清除浮動的程式碼*/
    height:0;
}
.clearfix{display: inline-block;
 
} /* for IE/Mac */
</style>
<div class="clearfix">
    <div style="float: left;">clear:both ;son div</div>
</div>

清除浮動本質上是說要清除浮動元素帶來的一些影響（例如高度塌陷）。在上面的例子中，我們給 :after偽元素添加了clear:both;屬性,為了解釋這個屬性的作用，我們看下面的一段程式碼。

<div style="width: 150px; border: 1px solid #ccc;">
    <div
 
 style="width: 100px; background: greenyellow;">div1</div>
    <div style="width: 100px; background: blueviolet; float:left;">div2</div>
    <div style="width: 120px; background: grey; clear:left;"></div>
</div>

<div style="width: 150px; border: 1px solid #ccc; margin-top: 20px;">
    <div style="width: 100px; background: greenyellow;">div1</div>
    <div style="width: 100px; background: blueviolet; float:left;">div2</div>
    <div style="width: 120px; background: grey;  "></div>
</div>

clear:left;會讓元素跟在其左側浮動元素的後面，而不會忽略前面的浮動元素，位於浮動元素後面。 同理，clear:right;則會清除元素右側浮動元素的影響。 而clear:both;就是清除左右兩側的影響。

另外一種方式position:absolute;

不推薦這種方式，因為這需要改變父元素本身的position屬性。也許在某種情況下，你可以修改。但是，如果你不能修改怎麼辦？？

<div style="position:absolute;">
    <div style="float: left;">postion:absolute clear float</div>
</div>

之所以會提到這個方式，是為了說明 前面兩種方式（設定float和overflow:hidden;）清除浮動的原理：當給父元素設定overflow:hidden屬性時，實際上父元素本身形成了一個BFC(Block Formating Context)。

獨立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，就是說包含塊會把浮動元素的高度也計算在內，所以就不用清除浮動來撐起包含塊的高度。

形成一個BFC的情況：

• 根元素
• float屬性不為none
• position為absolute或fixed
• display為inline-block, table-cell, table-caption, flex, inline-flex
• overflow不為visible