譯：能夠用什麼方法清除浮動？

原文連接：http://stackoverflow.com/a/1633170

根據正在生產中的設計，如下每一個 clearfix CSS 解決方案都有本身的優點。

---

「Reloaded" clearfix

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

最新的 micro-clearfix 代碼：

.container::after {
  content: ""; /* If you do not care for 「old」 Opera */
  display: block;
  clear: both;
}

(譯註：若是要支持老 Opera 瀏覽器，應使用 content: " ")

「Best That ClearFix"，一個爲現代瀏覽器而生的 clearfix

CSS Mojo 的 Thierry Koblentz' 指出當編碼目標爲現代瀏覽器時，咱們能夠放心的移除 zoom 和 ::before 屬性/值轉而簡單地使用：

.container::after {
  content: "";
  display: table;
  clear: both;
}

這種方式不支持 IE6/7

Thierry 指出：「謹慎提醒：若是你要從頭開始一個新項目，去吧！可是不要切換你如今使用的技術，由於即使你如今不打算支持老 IE 瀏覽器，你如今的規則仍能防止外邊距重疊。」

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) */
}

溢出屬性

當定位內容不會超出容器的邊距時，一般狀況下該方法是優先選擇的。

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 觸發 "hasLayout"，其它屬性也能夠在元素上觸發 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 中觸發 hasLayout:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

雖然能夠工做，但使用 hack 並不是理想的選擇。

"::after" 僞元素

這種老的「簡明清除」方法有容許定位元素懸掛在容器以外的優勢，可是以付出更多棘手的 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 使用雙冒號 ::. 雙冒號是僞元素的標準實現，而且再也不建議使用單冒號。將來可能放棄對單冒號的支持。

對元素使用"clear"屬性

簡明扼要的方法：

<br style="clear:both" /> <!-- So dirty! -->

不少緣由證實使用清除標籤並不理想：

• 主要緣由：你將樣式帶入到了標記中。這意味着若是你不想使用相同標記的文檔，重用標記將會變得更加困難。應該使用 CSS 在不一樣的上下文中對相同的標記進行格式化。
• 不能爲你的標籤添加任何語義信息。
• 使你的代碼看起來不專業
• 在將來你想使用其餘的 clearfix 解決方案時，你將不得不回過頭來刪除全部的 <br> 標籤。