您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

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

 

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

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

    采用一個(gè)HTML標(biāo)簽,以及css的clear屬性,來手工清理浮動(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” 等樣式來自動(dòng)清理浮動(dòng)。

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


使用 clear 樣式清除

樣例:

.clear-float {clear:both;}

clear 屬性是 CSS 1 就提供的用來清除浮動(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á)到與手工添加元素指定清理的效果。

注意兼容問題:
: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è)名詞過于晦澀,在 CSS 3 草案中被變更為名詞 Root Flow,顧名思義,是創(chuàng)建了一個(gè)新的根布局流,這個(gè)布局流是獨(dú)立的,不影響其外部元素的。實(shí)際上,這個(gè)特性與 早期 IE 的 hasLayout 特性十分相似。

注意兼容問題:
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 特性廠商說明鏈接: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)元素高度。

注意兼容問題:
除去 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í)際上說是 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 特性廠商說明鏈接: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í)際問題:
雖然這種方式并沒有兼容問題,但實(shí)際使用中并不推薦。因?yàn)楹苋菀淄茢喑?,頁面中只要有一個(gè)浮動(dòng)元素,使用該方法清理浮動(dòng)將不可避免的使頁面所有元素都浮動(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 中可以通過 hasLayout 屬性來判斷一個(gè)元素是否擁有 layout ,如 object.currentStyle.hasLayout 。

'Layout' 是 IE 瀏覽器渲染引擎的一個(gè)內(nèi)部組成部分。在 IE 瀏覽器中,一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行組織和計(jì)算大小, 要么依賴于包含塊來計(jì)算尺寸和組織內(nèi)容。為了協(xié)調(diào)這兩種方式的矛盾,渲染引擎采用了 'hasLayout' 屬性,屬性值可以為 true 或 false。 當(dāng)一個(gè)元素的 'hasLayout' 屬性值為 true 時(shí),我們說這個(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), 通過設(shè)置任何元素的 'width' 或 'height'(非auto)都可以觸發(fā) hasLayout ; 但在 IE6 和 IE7 的標(biāo)準(zhǔn)模式中的行內(nèi)元素上卻不行,設(shè)置 'display:inline-block' 才可以。

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

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

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

建議

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

    采用一個(gè)HTML標(biāo)簽,以及css的clear屬性,來手工清理浮動(dòng);
    為元素設(shè)置 overflow:hidden 或 overflow:auto 值,配合可以設(shè)置 zoom:1 樣式觸發(fā) IE6 haslayout 特性,來達(dá)到兼容所有瀏覽器清理浮動(dòng)的目的。
    采用偽元素:after,配合可以設(shè)置 zoom:1 樣式觸發(fā) IE6/7 haslayout 特性,來達(dá)到兼容所有瀏覽器清理浮動(dòng)的目的。
[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd1828.html
網(wǎng)頁前端 - jQuery 自適應(yīng)背景插件
iOS界面設(shè)計(jì)切圖小結(jié)
圖趣網(wǎng)微信
建議反饋
×