「有史以來最好的清除補丁？」

Question

我看到這個，而不同的clearfix這裏方法：http://www.marcwatts.com.au/blog/best-clearfix-ever/

它提議增列它會自動clearfix，並不需要你到「clearfix」或類似的類添加到要清除的元素下面的CSS代碼。

/* our Global CSS file */ 
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } 

/* our ie CSS file */ 
article { zoom:1; } 
aside { zoom:1; } 
div { zoom:1; } 
footer { zoom:1; } 
form { zoom:1; } 
header { zoom:1; } 
nav { zoom:1; } 
section { zoom:1; } 
ul { zoom:1; } 

這種方法有什麼缺點嗎？這可能會最終澄清你的元素，你可能不一定希望clearfix'ed？還是這樣的規則可以解釋任何情況？

Answer 1

我認爲這是一個壞主意。你真的會信任一個似乎忘記這麼做的人：

article, aside, div, footer, form, header, nav, section, ul { zoom:1; } 

清除花車並不是一件複雜的事。

它應該在個案基礎上處理，而不是雪撬錘到「每個」元素。

這樣做會回來咬你一些的方式，我敢肯定。

首先，我同意@Guffa的回答。

---

針對它的邊緣的情況下的原因涉及IE7：http://www.satzansatz.de/cssd/onhavinglayout.html

zoom: 1是一種常見的方法是提供一些被稱爲hasLayout的元件。將一個元素應用hasLayout可修復某些類型的呈現問題，但它也可能導致其他問題。來自鏈接文檔的報價：

不要給所有人佈局。在該濃度中毒， 有佈局不治本，它從根本上改變渲染。

---

我個人喜歡用overflow: hidden方法包含浮動。當那doesn't work，那我用的是clearfix。

您應該使用clearfix的版本從http://html5boilerplate.com/：

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

/* 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 

.clearfix { 
    *zoom: 1; 
} 

Answer 2

難道這最終明確了' 元素，你可能不一定 希望clearfix'ed？

是的。我不想每個div元素都被清除。

Answer 3

Are there any disadvantages to this method? 

其中之一是，它是不夠的< IE8，因爲「後」元素是不是很好的支持。更多關於CSS tricks

Answer 4

在Cascade Framework，我使用所有的 「塊級」 元素以下clearfix：

div:after { 
    content: ""; 
    display: table; 
} 

div:after { 
    clear: both; 
} 

div { 
    *zoom: 1; 
} 

我從來沒有遇到過任何這種技術的問題，除了使用第三方JS庫時的小怪癖......可以通過「不清楚修復」父元素來修復。

就我個人而言，我認爲clearfixed塊級元素更加直觀易用，而且我不想再回到以傳統方式使用浮動塊了。我認爲默認情況下不修復所有塊級元素的唯一原因是因爲它是非標準行爲，它可能會讓其他人閱讀您的代碼時混淆視聽。

如果您確實需要摺疊浮動元素的父級，則替代策略是對父級使用display: relative，對子級使用display: absolute。到目前爲止，我還沒有遇到任何用例，因爲這種策略不適合用於浮動元素的縮小父母。

Answer 5

在我的項目中，我在過去的幾年中一直在全球範圍內清除所有div，並且它一直在爲我工作。在我使用div的情況下，大約95％的clearfix在全球範圍內應用於網站時都非常有魅力。當然有些情況下會出現潛在的問題，我最終會爲任何有問題的div取消clearfix。我使用的CSS聲明是：

div:after { 
    clear: both; 
    margin: 0; 
    padding: 0; 
    display: table; 
    font-size: 0; 
    line-height: 0; 
    content: ' '; 
    visibility: hidden; 
    overflow: hidden; 
    } 
div { 
    *zoom: 1; 
    }