clearfix - 哪種clearfix方法是最好的呢?

  显示原文与译文双语对照的内容

我有一個 div 包裝two-column布局的古老問題。 我的側邊欄被浮動,所以我的容器 div 無法包裝內容和邊欄。


<div id="container">
 <div id="content"></div>
 <div id="sidebar"></div>
</div>

在 Bug 中修復清除的方法似乎有很多:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden
  • 等等.

但在我看來,唯一能正常工作的是 <br clear="all"/> 解決方案,它有點臟。 overflow:auto 給我提供了討厭的滾動條,overflow:hidden 肯定有副作用。 另外,IE7顯然應該不會因為它的錯誤行為而遭受這個問題,但在我的情況下,它與 FF 。

目前最可靠的best-practice方法是什麼?

时间:

我們要解決的問題是什麼?

浮動內容有兩個重要的注意事項:

  1. 包含後代浮動。這意味著有問題的要素使得本身對它封裝所有浮動後代個子夠高的。 ( 它們不會掛在外面。)

    Floating content hanging outside its container

  2. 從外部浮動的絕緣後代。 這意味著元素內部的後代應該能夠使用 clear: both,並且它不能與元素之外的浮動交互。

     <code> clear: both </code> interacting with a float elsewhere in the DOM

塊格式上下文

只有一種方法可以做到這兩個。 這就是建立一個新的塊格式上下文編輯器。 建立塊格式上下文的元素是一個絕緣矩形,其中浮動與彼此交互。 塊格式化上下文將總是足夠高,以可視化地包裝它的浮動後代,並且塊格式上下文之外的不可以與內部的元素交互。 這種雙向絕緣正是你想要的。 在 IE 中,這個概念叫做 hasLayout,它可以通過 zoom: 1 設置。

有幾種方法可以建立塊格式化上下文,但我推薦的解決方案是 display: inline-block 。 ( 當然,有使用 width: 100%通常警告,所以使用 box-sizing: border-box 或者 paddingmarginborder 在不同的元素上。)

最可靠的解決方案

浮動最常見的應用可能是two-column布局。 ( 可以擴展到三列。) 首先標記結構。


<div class="container">
 <div class="sidebar">
 sidebar<br/>sidebar<br/>sidebar
 </div>
 <div class="main">
 <div class="main-content">
 main content
 <span style="clear: both">
 main content that uses <code>clear: both</code>
 </span>
 </div>
 </div>
</div>

現在的CSS 。


/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden. */
.container {
 display: inline-block;
 width: 100%;
 zoom: 1;/* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
 float: left;
 width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
 margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
 display: inline-block;
 width: 100%;
 zoom: 1;/* new block formatting context via hasLayout for IE 6/7 */
}

自己來試試

轉到 JS Bin 使用代碼,看看這個解決方案是如何從底層構建的。

傳統clearfix方法認為有害的方法

于 IE 和每個人都相關的問題與傳統的else, clearfix解決方案是他們使用兩個不同的渲染同樣的概念得到了 goal. 在 IE 他們使用hasLayout來建立一個新的塊格式化內容,但對於其他人,他們使用生成的方塊與 clear: both ( :after ),它不會建立新的塊格式化上下文。 這意味著一切在所有情況下都不會表現出同樣的行為。 有關為什麼這一點不好的解釋,請查看對Clearfix的所有了解都是錯誤的。

所使用的新標準,如 Inuit.cssBourbon - 兩種應用非常廣泛和 well-maintained css/sass框架:


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


便箋

這不支持 IE7.你不應該為IE7支持 關於用戶和用戶組織到 switch 用於現代browsers,這樣做仍然存在以公開為不固定攻擊和使之變得難度對於所有其他網路開發人員,因為它減少了 pressure.

在因擔心宣布並解釋了 Thierry Koblentz. 在對加拉格爾 micro-clearfix · 2011,,它可以用於不必要的實際重量並不重要 在這個過程中,它為你自己的使用釋放一個 pseudo-element 。

有時現在已經至少一年沒有這裡方法被設計出來,和原不便,上面回答問題應更新- 這是很流行的。

我建議使用以下方法,它取自 http://html5boilerplate.com/


/*>> The Magnificent CLEARFIX <<*/


.clearfix:after { 
 content:"."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}
.clearfix { 
 display: inline-block; 
}
* html. clearfix { 
 height: 1%; 
}/* Hides from IE-mac */
.clearfix { 
 display: block; 
}

溢出屬性可以用於清除沒有附加mark-up的浮動:


.container { overflow: hidden; }

這適用於除IE6之外的所有瀏覽器,你需要做的就是啟用 hasLayout ( 縮放是我的首選方法):


.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

官方數據中我發現一個 點沒有 font-size 。 而且如果你設置高度= 0第1 個數組元素在你DOM-Tree具有該類"clearfix" 12 px: ) 這時將allways有一個距底部的頁面,

你必須像這樣修復它:


/* float clearing for everyone else */
.clearfix:after{
 clear: both;
 content:".";
 display: block;
 height: 0;
 visibility: hidden;
 font-size: 0;
}

現在是YAML-Layout的一部分。。 看看它- 非常有趣 ! http://www.yaml.de/en/home.html

這是一個非常整齊的解決方案:


/* For modern browsers */
.cf:before,
.cf:after {
 content:"";
 display:table;
}

.cf:after {
 clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
 zoom:1;
}

已知在 Firefox 3.5 +,Safari 4 +,Chrome,Opera 9 +,IE 6 +

之前在現代browsers,包括:選擇器不必清除浮動的,但它可以防止 top-margins collapsing. IE 6/7 zoom:1 時applied,這樣可以確保硬碟強烈建議檢測所以有很明顯

來自 http://nicolasgallagher.com/micro-clearfix-hack/

Clearfix來自 Bootstrap:


.clearfix {
 *zoom: 1;
}

.clearfix:before,
.clearfix:after {
 display: table;
 line-height: 0;
 content:"";
}

.clearfix:after {
 clear: both;
}

老實說;所有解決方案似乎都是一個 hack 來修復渲染 Bug 。 我錯了?

我發現 <br clear="all"/> 是最簡單最簡單的。 到處看到 class="clearfix" 不能描邊對象的意識相結合人誰來無關的markeup元素還怎麼可能? 你只是在不同的畫布上繪製問題。

我也使用 display: hidden 解決方案,它很好,不需要額外的類聲明或者html標記。。 但是有時候你需要元素來溢出容器,例如。 漂亮的緞帶和窗框

...