根據(jù)正在生產(chǎn)中的設(shè)計(jì)，以下每個(gè) clearfix CSS 解決方案都有自己的優(yōu)勢(shì)。

“Reloaded" clearfix

CSS Mojo 的 Thierry Koblentz' 寫了另一篇文章來(lái)重新審視清除浮動(dòng)，強(qiáng)有力地證明了使用 display: block 不會(huì)禁用外邊距重疊，這比使用 display: table 更有優(yōu)勢(shì)。

最新的 micro-clearfix 代碼：

.container::after {

content: ""; /* If you do not care for “old” Opera */

display: block;

clear: both;

}

(譯注：如果要支持老 Opera 瀏覽器，應(yīng)使用 content: " ")

“Best That ClearFix"，一個(gè)為現(xiàn)代瀏覽器而生的 clearfix

CSS Mojo 的 Thierry Koblentz' 指出當(dāng)編碼目標(biāo)為現(xiàn)代瀏覽器時(shí)，我們可以放心的移除 zoom 和 ::before 屬性/值轉(zhuǎn)而簡(jiǎn)單地使用：

.container::after {

content: "";

display: table;

clear: both;

}

這種方式不支持 IE6/7

Thierry 指出：“謹(jǐn)慎提醒：如果你要從頭開(kāi)始一個(gè)新項(xiàng)目，去吧！但是不要切換你現(xiàn)在使用的技術(shù)，因?yàn)榧幢隳悻F(xiàn)在不打算支持老 IE 瀏覽器，你現(xiàn)在的規(guī)則仍能防止外邊距重疊。”

Micro Clearfix

最新的全球都采用的 clearfix 解決方案，Micro Clearfix by Nicolas Gallagher.

.container::before, .container::after {

content: "";

display: table;

}

.container::after {

clear: both;

}

.container {

zoom: 1; /* For IE 6/7 (trigger hasLayout) */

}

溢出屬性

當(dāng)定位內(nèi)容不會(huì)超出容器的邊距時(shí)，通常情況下該方法是優(yōu)先選擇的。

http://www.quirksmode.org/css/clearing.html - 闡述如何解決與此技術(shù)有關(guān)的常見(jiàn)問(wèn)題，即，在容器上設(shè)置 width: 100%.

.container {

overflow: hidden;

display: inline-block; /* Necessary to trigger "hasLayout" in IE */

display: block; /* Sets element back to block */

}

除了使用 display 屬性來(lái)為 IE 觸發(fā) "hasLayout"，其它屬性也可以在元素上觸發(fā) IE 的 "hasLayout".

.container {

overflow: hidden; /* Clearfix! */

zoom: 1; /* Triggering "hasLayout" in IE */

display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */

}

另一種使用 overflow 屬性清除浮動(dòng)的方式是用 underscore hack. IE 將會(huì)應(yīng)用前置下劃線屬性的值，其它瀏覽器不會(huì)。zoom 屬性將會(huì)在 IE 中觸發(fā) hasLayout:

.container {

overflow: hidden;

_overflow: visible; /* for IE */

_zoom: 1; /* for IE */

}

雖然可以工作，但使用 hack 并非理想的選擇。

"::after" 偽元素

這種老的“簡(jiǎn)明清除”方法有允許定位元素懸掛在容器之外的優(yōu)點(diǎn)，但是以付出更多棘手的 CSS 為代價(jià)的。

http://www.positioniseverything.net/easyclearing.html

.container {

display: inline-block;

}

.container::after {

content: "";

display: block;

height: 0;

clear: both;

overflow: hidden;

visibility: hidden;

}

.container {

display: block;

}

除非你需要支持 IE 8，你應(yīng)該總是對(duì) before 和 after 使用雙冒號(hào) ::. 雙冒號(hào)是偽元素的標(biāo)準(zhǔn)實(shí)現(xiàn)，并且不再建議使用單冒號(hào)。未來(lái)可能放棄對(duì)單冒號(hào)的支持。

對(duì)元素使用"clear"屬性

簡(jiǎn)明扼要的方法：

 <br />

很多原因證明使用清除標(biāo)簽并不理想：

主要原因：你將樣式帶入到了標(biāo)記中。這意味著如果你不想使用相同標(biāo)記的文檔，重用標(biāo)記將會(huì)變得更加困難。應(yīng)該使用 CSS 在不同的上下文中對(duì)相同的標(biāo)記進(jìn)行格式化。

不能為你的標(biāo)簽添加任何語(yǔ)義信息。

使你的代碼看起來(lái)不專業(yè)

在未來(lái)你想使用其他的 clearfix 解決方案時(shí)，你將不得不回過(guò)頭來(lái)刪除所有的 <br> 標(biāo)簽。

當(dāng)前文章：譯：可以用什么方法清除浮動(dòng)？
分享網(wǎng)址：http://www.rwnh.cn/news31/148781.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、靜態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷推廣、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)