詳解CSS中清除浮動(dòng)的幾種方法

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

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

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

對(duì)這些方式我們一一來(lái)對(duì)照 CSS 標(biāo)準(zhǔn)（或者瀏覽器特性）來(lái)解釋下。


使用 clear 樣式清除

樣例：

.clear-float {clear:both;}

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

注：規(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)，所有子元素最后自動(dòng)生成一個(gè)偽元素，并可以為這個(gè)偽元素設(shè)定樣式。在設(shè)定樣式中，使用 clear 屬性即可達(dá)到與手工添加元素指定清理的效果。

注意兼容問(wèn)題：
:after 偽元素在 IE6/7 中并不被支持，這是由于之前的 IE 版本僅完全實(shí)現(xiàn)了 CSS 1 規(guī)范標(biāo)準(zhǔn)，以及一部分 CSS 2 規(guī)范，恰巧 :after 偽元素不在實(shí)現(xiàn)之例。
此部分詳細(xì)內(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 時(shí)，實(shí)際上是創(chuàng)建了 CSS 2.1 規(guī)范定義的 Block Formatting Contexts。創(chuàng)建了它的元素，會(huì)重新計(jì)算其內(nèi)部元素位置，從而獲得確切高度。這樣父容器也就包含了浮動(dòng)元素高度。這個(gè)名詞過(guò)于晦澀，在 CSS 3 草案中被變更為名詞 Root Flow，顧名思義，是創(chuàng)建了一個(gè)新的根布局流，這個(gè)布局流是獨(dú)立的，不影響其外部元素的。實(shí)際上，這個(gè)特性與 早期 IE 的 hasLayout 特性十分相似。

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

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

注：IE hasLayout 特性廠商說(shuō)明鏈接：hasLayout Property

使用 display:table 清除

樣例：

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

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

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

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

使用表格類元素作為浮動(dòng)元素容器

樣例：

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

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

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

注：IE hasLayout 特性廠商說(shuō)明鏈接：hasLayout Property

使用浮動(dòng)父元素清除

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

實(shí)際問(wèn)題：
雖然這種方式并沒(méi)有兼容問(wèn)題，但實(shí)際使用中并不推薦。因?yàn)楹苋菀淄茢喑?，?yè)面中只要有一個(gè)浮動(dòng)元素，使用該方法清理浮動(dòng)將不可避免的使頁(yè)面所有元素都浮動(dòng)才可以達(dá)到預(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 的專有概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位和尺寸計(jì)算，與其他元素的關(guān)系和相互作用，以及對(duì)應(yīng)用還有使用者的影響。

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

'Layout' 在 IE 中可以通過(guò) hasLayout 屬性來(lái)判斷一個(gè)元素是否擁有 layout ，如 object.currentStyle.hasLayout 。

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

    默認(rèn)擁有布局的元素：

    <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 外任意值，僅用于塊級(jí)元素)
    overflow-x: (除 visible 外任意值，僅用于塊級(jí)元素)
    overflow-y: (除 visible 外任意值，僅用于塊級(jí)元素)
    position: fixed

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

注意兼容問(wèn)題：
haslayout 特性僅 IE 支持，其他瀏覽器并無(wú)此特性?？梢砸揽坑?jì)算布局清理浮動(dòng)的 haslayout 特性僅在 IE 6/7 中存在，IE8 之后將使用 CSS 2.1 的 Block Formatting Contexts 定義來(lái)達(dá)到同樣效果。

注：IE hasLayout 特性廠商說(shuō)明鏈接：hasLayout Property

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

建議

對(duì)于初學(xué)者我們推薦如下方式之一來(lái)清理浮動(dòng)元素，它們均相對(duì)簡(jiǎn)單可靠：

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