清除CSS中浮動元素的最佳方法是什麼？

目前被認爲清除CSS浮動元素，將最好的辦法：清除CSS中浮動元素的最佳方法是什麼？

保持HTML標記語義和自由不必要的元素儘可能的和
是一個跨瀏覽器，跨平臺可以爲大多數瀏覽器可靠運行的解決方案？

2011-11-01 jmlane

應該被移動到堆棧溢出 –

是否所有的CSS問題更適合所以比Design.SE或只是那些在本質上不是設計主要是技術性的關係嗎？ – jmlane

這不是一個圖形設計的問題。這是一個CSS，因此屬於StackOverflow。

這就是說，保持HTML清潔的答案只是爲了給父母一個溢出。所以，如果你的標記是：

<div class="wrapper"> 
    <div style="float: left;"></div> 
    <div style="float: left;"></div> 
</div>

你可以給包裝溢出：

.wrapper {overflow: auto}

現在.wrapper將包含彩車。

這通常是所有需要的。

有時，在較老的IE中，容器也需要一個寬度。

來源

2011-11-01 19:18:23

謝謝。這種方法似乎是我發佈問題後所做的其他研究的最佳解決方案。 – jmlane

你可以讓這更復雜，但一個簡單的方法是一類添加到您的CSS稱爲.clearfix與此屬性：

.clearfix {clear: both;}

然後，只需插入一個標籤，你想清楚什麼下方。

谷歌清晰的更現代的方式來定義標籤。

來源

2011-11-02 16:46:24

對不起，標籤沒有正確格式化和顯示。把它作爲下一個div：

–

是真的，儘管這會在頁面上增加額外的標記。 –

@DA。是正確的，來自clearfix解決方案的附加（可能在語義上不必要的）標記違反了我的第一條準則。一個有效的答案，但我想看看是否有人提出一個不需要額外標記的解決方案。 – jmlane

有點棘手，但它是現代瀏覽器的工作:)

.wrapper::after { 
    content:""; 
    clear:both; 
}

來源

2011-11-03 18:58:27

我已經看到了這一點，最好的方法是使用：&前：後現代瀏覽器和縮放僞元素：1爲老年人IE版本。

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

.cf:after { 
    clear:both; 
} 

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

此處瞭解詳情： http://nicolasgallagher.com/micro-clearfix-hack/

來源

2011-11-04 13:11:31 imsoper

清除CSS中浮動元素的最佳方法是什麼？

回答

相關問題