浮動元素摺疊邊緣

根據CSS 2.1標準，浮動元素的垂直邊緣不應該與任何相鄰元素摺疊。浮動元素摺疊邊緣

參見： http://www.w3.org/TR/CSS21/box.html#collapsing-margins

但實際上，這是不是在IE6之外的所有瀏覽器（FF，Safari瀏覽器，Opera和Chrome瀏覽器）會發生什麼（不與IE7或IE8嘗試雖然）。代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> 
</head> 
<body> 
<div style="margin-bottom:10px;">HEADER</div> 
<div style="float:left;width:100%;margin:10px 0px;">Floating div</div> 
<div style="margin-top:10px;">FOOTER</div> 
</body> 
</html>

加上clear：both;到頁腳div沒有任何區別。

我在CSS沒有專家，所以請糾正我，如果我的理解是錯誤的

編輯：
顯然，我的問題，造成了一些混亂。上面的代碼只是爲了演示我所指的行爲，我試圖找到解決方案並不是一個真正的問題。

來源

2009-04-19 Waleed Eissa

在IE6和標準瀏覽器都沒有浮動的邊緣與兄弟姐妹崩潰。根據引用的標準，這是正確的。

效果圖中的差異是由IE6對哪些邊距流在一起的解釋造成的。（如果你給每個div的背景色也使得它更容易看到這裏發生了什麼。）

兩個或兩個以上相鄰的塊盒垂直邊距在正常流動崩潰

隨着normal flow如此定義：

由於浮動不在流程中，浮動框前後創建的未定位塊框垂直流動，就好像浮動不存在一樣。

也就是說，它們一起流動並且具有相鄰的垂直邊緣，這些垂直邊緣可能會塌縮。 IE6（和在怪癖模式下的IE7）得到這個錯誤，並認爲浮動打破了流動，導致不會崩潰發生。

由於圍繞垂直邊緣和塌陷的混亂，以及仍然存在的瀏覽器錯誤，我建議避免垂直邊距，並儘可能使用填充。

來源

2009-04-19 15:10:59 bobince

感謝您的解釋，實際上我懷疑同樣的事情，但不確定。至於使用填充而不是邊距，實際上這是我爲你提到的相同原因所做的。 – 2009-04-19 15:30:03

我把它加入到解決（IE7，FF）：

<div style="clear:both;"></div>

的浮動DIV和頁腳間。

[編輯：]當你浮動一個元素，並將一個元素放在它之後，你想在下一個空間的開始處開始時，你應該/必須使用一個清除元素。 Zack也是這樣：如果你只是堆疊div，你不會/不應該浮動任何東西。

來源

2009-04-19 15:09:39

浮動元素摺疊邊緣

回答

相關問題