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

“Reloaded" clearfix

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

最新的 micro-clearfix 代碼：

.container::after {

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

display: block;

clear: both;

}

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

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

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

.container::after {

content: "";

display: table;

clear: both;

}

這種方式不支持 IE6/7

Thierry 指出：“謹慎提醒：如果你要從頭開始一個新項目，去吧！但是不要切換你現(xiàn)在使用的技術，因為即便你現(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) */

}

溢出屬性

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

http://www.quirksmode.org/css/clearing.html - 闡述如何解決與此技術有關的常見問題，即，在容器上設置 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 屬性清除浮動的方式是用 underscore hack. IE 將會應用前置下劃線屬性的值，其它瀏覽器不會。zoom 屬性將會在 IE 中觸發(fā) hasLayout:

.container {

overflow: hidden;

_overflow: visible; /* for IE */

_zoom: 1; /* for IE */

}

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

"::after" 偽元素

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

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，你應該總是對 before 和 after 使用雙冒號 ::. 雙冒號是偽元素的標準實現(xiàn)，并且不再建議使用單冒號。未來可能放棄對單冒號的支持。

對元素使用"clear"屬性

簡明扼要的方法：

 

很多原因證明使用清除標簽并不理想：

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

不能為你的標簽添加任何語義信息。

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

在未來你想使用其他的 clearfix 解決方案時，你將不得不回過頭來刪除所有的
標簽。

本文名稱：譯：可以用什么方法清除浮動？
網(wǎng)址分享：http://www.rwnh.cn/news/148781.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、用戶體驗、ChatGPT、企業(yè)網(wǎng)站制作、電子商務、微信小程序

廣告

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