清除兒童浮標不清除「外部」浮標

清除一組浮標的最常見方式是在父母的:after僞元素上使用clear:both;。例如：清除兒童浮標不清除「外部」浮標

.group:after { 
    visibility: hidden; 
    display: block; 
    content: ""; 
    clear: both; 
    height: 0; 
    } 
* html .group    { zoom: 1; } /* IE6 */ 
*:first-child+html .group { zoom: 1; } /* IE7 */

這在大多數情況下都能正常工作，但在浮動元素中浮動元素時失敗。它清除全部浮游物，不只是兒童浮游物。

固定的一種可能的方式，是通過添加

.group { 
    display:inline-block; 
}

但是，這會產生有害的副作用。

是否有結算的任何方式獨生子女浮動，而不是一個頁面上的每個浮動，？

來源

2012-06-13 ddlshack

我對清除浮動首選方法實際上是包含元素的overflow屬性設置爲auto：

.group { 
    overflow: auto; 
}

overflow: hidden也能工作。

這將迫使.group以清除任何漂浮的孩子，但不會清除頁面上的任何其他浮動。我認爲這可能是你想要實現的？

有時，這種方法不會強制IE的舊版本，並清除浮動（抱歉，我不記得哪個IE版本完全一致），在這種情況下，你需要強制haslayout的IE瀏覽器。在.group上設置一個明確的寬度就可以了。但大多數情況下，我發現這種方法「正常工作」。

這裏有一個演示：http://jsfiddle.net/C7KWn/

來源

2012-06-14 02:04:08

這個作品真的很好，謝謝。 haslayout可以由'zoom：1;'觸發。 – ddlshack

我喜歡避免使用縮放：1，如果我可以，只是因爲它看起來像一個冗餘的聲明。但是，如果你真的使用這種方法結束測試，在IE中進行測試，並且我認爲大部分時間它都可以在沒有任何調整/黑客的情況下工作。我有一種感覺，它可能是IE6有時會導致我的問題，因爲我注意到在IE中出現任何清理浮動問題的年齡。 –

如果需要觸發hasLayout，它不是多餘的。如果它只是IE6有這些問題，我不會打擾它支持它，因爲它是一個非常過時的瀏覽器。 – ddlshack

清除兒童浮標不清除「外部」浮標

回答

相關問題