詳解CSS中清除浮動的幾種方法

浮動 Floats 是 CSS 中的一種布局方式。它的渲染位置在行框與包含塊之間，這樣就可以使行框內(nèi)文字與浮動元素不重疊并且環(huán)繞它顯示。在布局過程中也經(jīng)常會使用它來達到左右并排布局的效果。但是，由于浮動特性，容器如果沒有明確設(shè)定高度，會依照普通流內(nèi)元素高度設(shè)置，這樣就會導(dǎo)致脫離普通流的浮動元素溢出容器，影響其后元素布局。

我們將現(xiàn)有已知的清楚浮動元素方法羅列下：

    采用一個HTML標簽，以及css的clear屬性，來手工清理浮動；
    采用偽類:after，動態(tài)建立一個塊元素，設(shè)定 clear 屬性，清理之前的浮動元素；
    采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)設(shè)定使父容器包含浮動元素；
    采用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動包含浮動元素；
    使用 TABLE 以及 TD 標簽作為浮動元素容器；
    采用 float:left/float:right 方式將父元素同樣浮動，就可以包含浮動內(nèi)容；
    在 IE 6/7 的標準文檔模式中設(shè)置 “width/height/zoom” 等樣式來自動清理浮動。

對這些方式我們一一來對照 CSS 標準（或者瀏覽器特性）來解釋下。


使用 clear 樣式清除

樣例：

.clear-float {clear:both;}

clear 屬性是 CSS 1 就提供的用來清除浮動的樣式，設(shè)置了 clear 屬性的元素，其上邊框位置會緊貼浮動元素的 margin-bottom 邊界位置渲染，忽略其 margin-top 設(shè)置。這樣，父容器高度未設(shè)定(值是 auto)時，由于定義的清理浮動樣式元素所在位置處于浮動元素之下，容器計算后的實際高度就包含了浮動元素。

注：規(guī)范原文鏈接：9.5.2 Controlling flow next to floats: the 'clear' property


使用偽元素 :after 清除

樣例：

.after-clear-float :after{content:””; display:block; clear:both;}

:after 偽元素是在 CSS 2 規(guī)范內(nèi)提出的，IE 6/7 并不支持。它的作用是在指定該偽元素元素內(nèi)，所有子元素最后自動生成一個偽元素，并可以為這個偽元素設(shè)定樣式。在設(shè)定樣式中，使用 clear 屬性即可達到與手工添加元素指定清理的效果。

注意兼容問題：
:after 偽元素在 IE6/7 中并不被支持，這是由于之前的 IE 版本僅完全實現(xiàn)了 CSS 1 規(guī)范標準，以及一部分 CSS 2 規(guī)范，恰巧 :after 偽元素不在實現(xiàn)之例。
此部分詳細內(nèi)容可參考：RS8010: IE6 IE7 IE8(Q) 不支持 ':before' 和 ':after' 偽元素

注：規(guī)范原文鏈接：5.12.3 The :before and :after pseudo-elements

使用 overflow 清除

樣例：

.overflow-clear-float {overflow:hidden;}
或者
.overflow-clear-float {overflow:auto;}

overflow 樣式值為 非 visilbe 時，實際上是創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts。創(chuàng)建了它的元素，會重新計算其內(nèi)部元素位置，從而獲得確切高度。這樣父容器也就包含了浮動元素高度。這個名詞過于晦澀，在 CSS 3 草案中被變更為名詞 Root Flow，顧名思義，是創(chuàng)建了一個新的根布局流，這個布局流是獨立的，不影響其外部元素的。實際上，這個特性與 早期 IE 的 hasLayout 特性十分相似。

注意兼容問題：
Block Formatting Contexts 概念是在 CSS 2.1 規(guī)范內(nèi)被提出。因此 IE6/7 中并不被支持，這是由于之前的 IE 版本僅完全實現(xiàn)了 CSS 1 規(guī)范標準，以及一部分 CSS 2.0 規(guī)范。在 IE 7 中，overflow 值為非 visible 時，可以觸發(fā) hasLayout 特性。這同樣使得 IE 7 同樣可以使容器包含浮動元素。
此部分詳細內(nèi)容可參考：RM8002: 不能同時在 IE6 IE7 IE8(Q) 中觸發(fā) hasLayout 并在其他瀏覽器中創(chuàng)建 Block Formatting Context 的元素在各瀏覽器中的表現(xiàn)會有差異

注：規(guī)范原文鏈接：9.4.1 Block formatting contexts

注：IE hasLayout 特性廠商說明鏈接：hasLayout Property

使用 display:table 清除

樣例：

.table-clear-float {display:table}
或者
.table-clear-float {display:table-cell}

當元素 display 值被設(shè)定為 table 或 table-cell 時，同樣也創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動元素高度。

注意兼容問題：
除去 Block Formatting Contexts 在 IE 6/7 中的兼容性外，display:talbe 系列樣式設(shè)定也不在 IE6/7 的支持范圍之內(nèi)。
此部分詳細內(nèi)容可參考：RM8001: 各瀏覽器對 'display' 特性值的支持程度不同

注：規(guī)范原文鏈接：9.4.1 Block formatting contexts

使用表格類元素作為浮動元素容器

樣例：

<table>
  <tr>
     <td>
       <div style=”float:left”></div>
    </td>
  </tr>
</table>

當使用 TABLE TD TH 等 TABLE 系列標簽時， 元素的 display 值實際上說是 display: table 系列，這同樣也創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動元素高度。同時在 IE 6/7 中，TABLE TD TH 等 TABLE 系列標簽天然擁有 haslayout 特性，這也可以使容器自動包含浮動元素高度。

注：規(guī)范原文鏈接：9.4.1 Block formatting contexts

注：IE hasLayout 特性廠商說明鏈接：hasLayout Property

使用浮動父元素清除

當元素設(shè)置 float:left/float:right 時 ，同樣也創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts。這樣父容器也就包含了浮動元素高度。同時，這個樣式也會在 IE 6/7 內(nèi)觸發(fā) hasLayout 特性，擁有這個特性的元素也可以計算出浮動元素的高度，使父元素包含他們。

實際問題：
雖然這種方式并沒有兼容問題，但實際使用中并不推薦。因為很容易推斷出，頁面中只要有一個浮動元素，使用該方法清理浮動將不可避免的使頁面所有元素都浮動才可以達到預(yù)期效果。

注：規(guī)范原文鏈接：9.4.1 Block formatting contexts

觸發(fā) hasLayout 清除

樣例：

haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}

'Layout' 是 IE 的專有概念，它決定了元素如何對其內(nèi)容進行定位和尺寸計算，與其他元素的關(guān)系和相互作用，以及對應(yīng)用還有使用者的影響。

'Layout' 可以被某些 CSS property（特性）不可逆的觸發(fā)，而某些 HTML 元素本身就具有 layout 。

'Layout' 在 IE 中可以通過 hasLayout 屬性來判斷一個元素是否擁有 layout ，如 object.currentStyle.hasLayout 。

'Layout' 是 IE 瀏覽器渲染引擎的一個內(nèi)部組成部分。在 IE 瀏覽器中，一個元素要么自己對自身的內(nèi)容進行組織和計算大小， 要么依賴于包含塊來計算尺寸和組織內(nèi)容。為了協(xié)調(diào)這兩種方式的矛盾，渲染引擎采用了 'hasLayout' 屬性，屬性值可以為 true 或 false。 當一個元素的 'hasLayout' 屬性值為 true 時，我們說這個元素有一個布局（layout），或擁有布局。

    默認擁有布局的元素：

    <html>, <body>
    <table>, <tr>, <th>, <td>
    <img>
    <hr>
    <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
    <iframe>, <embed>, <object>, <applet>
    <marquee>

    可觸發(fā) hasLayout 的 CSS 特性：

    display: inline-block
    height: (除 auto 外任何值)
    width: (除 auto 外任何值)
    float: (left 或 right)
    position: absolute
    writing-mode: tb-rl
    zoom: (除 normal 外任意值)

    IE7 還有一些額外的屬性(不完全列表)可以觸發(fā) hasLayout ：

    min-height: (任意值)
    min-width: (任意值)
    max-height: (除 none 外任意值)
    max-width: (除 none 外任意值)
    overflow: (除 visible 外任意值，僅用于塊級元素)
    overflow-x: (除 visible 外任意值，僅用于塊級元素)
    overflow-y: (除 visible 外任意值，僅用于塊級元素)
    position: fixed

    IE6 以前的版本（也包括 IE6 及以后所有版本的混雜模式，其實這種混雜模式在渲染方面就相當于 IE 5.5）， 通過設(shè)置任何元素的 'width' 或 'height'（非auto）都可以觸發(fā) hasLayout ； 但在 IE6 和 IE7 的標準模式中的行內(nèi)元素上卻不行，設(shè)置 'display:inline-block' 才可以。

注意兼容問題：
haslayout 特性僅 IE 支持，其他瀏覽器并無此特性。可以依靠計算布局清理浮動的 haslayout 特性僅在 IE 6/7 中存在，IE8 之后將使用 CSS 2.1 的 Block Formatting Contexts 定義來達到同樣效果。

注：IE hasLayout 特性廠商說明鏈接：hasLayout Property

以上內(nèi)容是常見清理浮動手段生效的規(guī)范（和瀏覽器廠商特性）原理。我們希望頁面開發(fā)者們，根據(jù)他們的兼容性特征以及實際情況來組合使用，以便達到實際項目目標。

建議

對于初學(xué)者我們推薦如下方式之一來清理浮動元素，它們均相對簡單可靠：

    采用一個HTML標簽，以及css的clear屬性，來手工清理浮動；
    為元素設(shè)置 overflow:hidden 或 overflow:auto 值，配合可以設(shè)置 zoom:1 樣式觸發(fā) IE6 haslayout 特性，來達到兼容所有瀏覽器清理浮動的目的。
    采用偽元素:after，配合可以設(shè)置 zoom:1 樣式觸發(fā) IE6/7 haslayout 特性，來達到兼容所有瀏覽器清理浮動的目的。