業(yè)務(wù)專線：13711534025
根據(jù)正在生產(chǎn)中的設(shè)計(jì)，以下每個(gè) clearfix CSS 解決方案都有自己的優(yōu)勢。
“Reloaded" clearfix
CSS Mojo 的 Thierry Koblentz' 寫了另一篇文章來重新審視清除浮動(dòng)，強(qiáng)有力地證明了使用 display: block 不會(huì)禁用外邊距重疊，這比使用 display: table 更有優(yōu)勢。
最新的 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)而簡單地使用：
.container::after {
content: "";
display: table;
clear: both;
}
這種方式不支持 IE6/7
Thierry 指出：“謹(jǐn)慎提醒：如果你要從頭開始一個(gè)新項(xiàng)目，去吧！但是不要切換你現(xiàn)在使用的技術(shù)，因?yàn)榧幢隳悻F(xiàn)在不打算支持老 IE 瀏覽器，你現(xiàn)在的規(guī)則仍能防止外邊距重疊?！?/p>
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)的常見問題，即，在容器上設(shè)置 width: 100%.
.container {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */
}
除了使用 display 屬性來為 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" 偽元素
這種老的“簡明清除”方法有允許定位元素懸掛在容器之外的優(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)該總是對 before 和 after 使用雙冒號(hào) ::. 雙冒號(hào)是偽元素的標(biāo)準(zhǔn)實(shí)現(xiàn)，并且不再建議使用單冒號(hào)。未來可能放棄對單冒號(hào)的支持。
對元素使用"clear"屬性
簡明扼要的方法：
<br style="clear:both" /> <!-- So dirty! -->
很多原因證明使用清除標(biāo)簽并不理想：
主要原因：你將樣式帶入到了標(biāo)記中。這意味著如果你不想使用相同標(biāo)記的文檔，重用標(biāo)記將會(huì)變得更加困難。應(yīng)該使用 CSS 在不同的上下文中對相同的標(biāo)記進(jìn)行格式化。
不能為你的標(biāo)簽添加任何語義信息。
使你的代碼看起來不專業(yè)
在未來你想使用其他的 clearfix 解決方案時(shí)，你將不得不回過頭來刪除所有的 <br> 標(biāo)簽。
原文鏈接：http://stackoverflow.com/a/1633170
