clearfix類在css中做什麼？

Question

我見過div標籤使用clearfix類時，其子divs使用float屬性。該clearfix類看起來是這樣的：

.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
.clearfix { 
    display: block; 
} 

我發現，如果我當我使用bottom-border屬性不使用clearfix，邊框會顯示孩子divs以上。有人可以解釋clearfix類的作用嗎？另外，爲什麼有兩個display屬性？這對我來說似乎很奇怪。我特別好奇content:'.'的含義。

感謝，G

Answer 1

花車是如何工作的

當浮動元素存在於頁面上，非浮動元素環繞浮動元素，類似於文本如何去各地的報紙上的圖片。從文檔的角度來看（HTML的原始目的），這就是浮動的工作原理。

float VS display:inline

display:inline-block的本發明之前，網站使用float設置在彼此的旁邊的元件。 float優於display:inline，因爲使用後者，不能設置元素的尺寸（寬度和高度）以及垂直填充（頂部和底部） - 浮動元素可以執行此操作，因爲它們被視爲塊元素。

浮動問題

主要的問題是，我們正在使用float針對其預期的目的。

另一個是，儘管float允許並排塊級元素，但浮點不賦予它的容器形狀。這就像position:absolute，其中元素「從佈局中取出」。例如，當一個空容器包含浮動100px x 100px <div>時，<div>不會將100px的高度賦予容器。

不像position:absolute，它影響，圍繞它的內容。浮動元素之後的內容將「包裹」元素。它從它旁邊的渲染開始，然後在它下面渲染，例如報紙文本如何在圖像周圍流動。

Clearfix救援

什麼clearfix確實很給力浮筒或含彩車來呈現它下面的容器後的內容。 Clear-Fix有很多版本，但它的名字來自通常使用的版本 - 使用CSS屬性clear的版本。

實例

Here are several ways to do clearfix，根據瀏覽器和使用情況。人們只需要知道如何在CSS中使用clear屬性以及如何在每個瀏覽器中呈現浮動以實現完美的跨瀏覽器清除修復。

你有什麼

你提供的風格是一種向後兼容的clearfix形式。關於這個clearfix的I found an article。事實證明，這是一箇舊的clearfix - 仍然適應舊的瀏覽器。文章中還有一個更新，更清晰的版本。這裏的故障：

• 你擁有的第一clearfix追加一個無形的僞元素，其風格clear:both，目標元素和下一個元素之間。這將強制僞元素在目標下呈現，並在僞元素下面呈現下一個元素。

• 第二個追加未由早期的瀏覽器所支持的風格display:inline-block。內聯塊與內聯塊一樣，但會爲您提供一些阻止元素的屬性，例如寬度，高度以及垂直填充。這是針對IE-MAC的。

• 這是的display:block的重新施加由於上述IE-MAC規則。該規則從IE-MAC「隱藏」。

總而言之，這3條規則保持.clearfix工作跨瀏覽器的，與舊的瀏覽器的初衷。

Answer 2

當一個元件，例如div是floated其父容器不再考慮其高度，即

<div id="main"> 
    <div id="child" style="float:left;height:40px;"> Hi</div> 
</div> 

的父容器將不會是40個像素高默認情況下。如果您使用這些容器來構造佈局，這會導致很多奇怪的小怪癖。

所以clearfix類，各種框架使用修復了這個問題通過使父容器「確認」所包含的元素。

一天算一天，我通常只使用框架，比如960gs，Twitter的引導鋪設並沒有與確切機制困擾。

可以點擊這裏閱讀

http://www.webtoolkit.info/css-clearfix.html

Answer 3

clearfix相同overflow:hidden。父母的兩個清楚漂浮的孩子，但clearfix不會切斷溢出到它的元素parent。 它也適用於上面的IE8 &。

有沒有必要在內容& .clearfix中定義"."。只是這樣寫：

.clr:after { 
    clear: both; 
    content: ""; 
    display: block; 
} 

HTML

<div class="parent clr"></div> 

閱讀這些鏈接，瞭解更多

http://css-tricks.com/snippets/css/clear-fix/，

What methods of ‘clearfix’ can I use?