細說清除浮動

1、什麼是清除浮動？

先說下爲何須要清除浮動。

一個元素設置了浮動（即 float 值爲 left, right 或 inherit 並從父元素上繼承 left 或 right 值）以後會影響它的兄弟元素的位置和父元素產生高度塌陷。具體的影響方式較爲複雜，要看這些兄弟元素是塊級元素仍是內聯元素；

如果塊級元素會無視這個浮動的塊框，也就是咱們平時看到的效果——使到自身儘量與這個浮動元素處於同一行，致使被浮動元素覆蓋，除非這些 div 設置了寬度，而且父元素的寬度不足以包含它們，這樣兄弟元素纔會被強制換行；

如果內聯元素，則會盡量圍繞浮動元素，經常使用來作圖文混排效果。

另外，浮動的元素脫離了普通流，這樣使得包含它的父元素並不會由於這個浮動元素的存在而自動撐高，這樣就會形成高度塌陷。

不管是影響兄弟元素仍是高度塌陷的問題，都不是咱們使用浮動的目的，設置浮動，只是爲了改變一個元素的佈局，但最終的結果卻形成了更多沒必要要的影響，這不利於佈局，

所以咱們須要清除這些額外的影響，也就是本文要介紹的清除浮動，其實更加準確的說，是清除浮動帶來的額外影響。

2、清除浮動的常見方法

一、clear

提及清除浮動，你們確定會想起 clear: both ，的確，這是 CSS 中清除浮動的屬性，clear 有both/left/right/none/inherit 幾個屬性值，分別表明在元素左右兩側不容許出現浮動元素/左側不容許出現浮動元素/右側不容許出現浮動元素/不清除浮動/繼承父元素的值。

clear的原理：clear 會爲元素添加足夠的空白空間，使到該元素的位置會放置在它前一個浮動元素之下，這跟增長元素外邊距使到元素佔據滿行而強制換行的效果是同樣的，事實上在 CSS1 和 CSS2 中，清除浮動正是經過自動爲清除元素（即設置了 clear 屬性的元素）增長外邊距實現的，從 CSS2.1 開始改成增長額外的空白空間，不改變外邊距。如今你們應該清楚了，既然是增長足夠的空間使到元素換行，那麼最穩妥的辦法就是使到該元素佔據一整行，

如今清除了浮動，可是，這只是清除了浮動對於兄弟元素的影響，而高度塌陷的問題尚未解決，所以，咱們須要更高級的清除浮動——閉合浮動。

爲何叫閉合浮動？由於浮動的元素脫離了普通流，所以對於它的父元素，它並無閉合，這時候就須要閉合浮動了。

二、overflow:hidden

這是較爲古老的方法了，除了div，也有使用其餘標籤的，但 div 更爲適用，由於除了瀏覽器賦予它的 display: block 外，它沒有其餘的樣式了，也不會有特殊的功能，乾乾淨淨。

（display: block 是瀏覽器賦予 div 的，存在於瀏覽器的 user agent stylesheet ，而不是 div 默認 display 的值就爲 block ，在 W3C 中，全部的 HTML 標籤 display 的默認值都爲 inline）

<div class="box">
    <div class="main left">我設置了左浮動 float: left</div>
    <div style="clear: both;"></div>
    <div class="aside">我是頁腳，個人上面添加了一個設置了 clear: both 的空 div</div>
</div>

這個 方法很方便，可是加入了沒有涵義的 div ，這違背告終構與表現分離的原則，而且後期維護也不方便。

三、overflow

在浮動元素的父元素上設置了 overflow 的值爲 hidden 或 auto ，能夠閉合浮動。另外在 IE6 中還須要觸發 hasLayout ，例如爲父元素設置容器寬高或設置 zoom：1

<div class="box" style="overflow: hidden; *zoom: 1;">
    <div class="main left">我設置了左浮動 float: left</div>
    <div class="aside left">我是頁腳，可是我也設置了左浮動。</div>
</div>

這個方法相對前者更加方便，也更加符合語義要求，只是 overflow 並非爲了閉合浮動而設計的，所以當元素內包含會超出父元素邊界的子元素時，可能會覆蓋掉有用的子元素，或是產生了多餘的滾動條。這也是在 overflow 方法誕生後依然須要尋找更佳方法的緣由。

四、使用 :after 僞元素

該方法來源於 positioniseverything， 結合 :after 僞元素（注意這不是僞類，而是僞元素，表明一個元素以後最近的元素）和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout ，具體請看下面的方法。

<style>
    .clearfix {/* 觸發 hasLayout */ zoom: 1; }
    .clearfix:after {content: &quot;.&quot;; display: block; height: 0; clear: both; visibility: hidden; }
</style>
<div class="box clearfix">
    <div class="main left">我設置了左浮動 float: left</div>
    <div class="aside left">我是頁腳，可是我也設置了左浮動。</div>
</div>

相對來講，這個辦法不但完美兼容主流瀏覽器，而且也很方便，使用重用的類，能夠減輕代碼編寫，另外網頁的結構也會更加清晰。

2、清除浮動方法的實質

清除浮動的方法能夠分紅兩類：一是利用 clear 屬性，包括在浮動元素末尾添加一個帶有 clear: both 屬性的空 div 來閉合元素，其實利用 :after 僞元素的方法也是在元素末尾添加一個內容爲一個點並帶有 clear: both 屬性的元素實現的。二是觸發浮動元素父元素的 BFC (Block Formatting Contexts, 塊級格式化上下文)，使到該父元素能夠包含浮動元素。

BFC 定義

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

• 內部的Box會在垂直方向，一個接一個地放置。

• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

• 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

• BFC的區域不會與float box重疊。

• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

• 計算BFC的高度時，浮動元素也參與計算

如何觸發 BFC

• 浮動元素，float 除 none 之外的值

• 絕對定位元素，position（absolute，fixed）

• display 爲如下其中之一的值 inline-blocks，table-cells，table-captions

• overflow 除了 visible 之外的值（hidden，auto，scroll）

在 CSS3 中，BFC 叫作 Flow Root，並增長了一些觸發條件：

• display 的 table-caption 值

• position 的 fixed 值，其實 fixed 是 absolute 的一個子類，所以在 CSS2.1 中使用這個值也會觸發 BFC ，只是在 CSS3 中更加明確了這一點。

先寫到這……