Question

我不会试图解释这一点，而是会给你代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>weird</title>
    <style type="text/css">
        div#sidebar {
            background-color: yellow;
            float: left;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- insert something here to shift the top 
         of the sidebar by the top margin of the following div
    -->
    <div id="sidebar">
        background-color: yellow;<br />
        float: left; <br />            
        width: 200px;<br />
    </div>

    <div style="margin-top: 200px;">div - margin-top: 200px;</div>
</body>
</html>

我在FF和Chrome中测试了这个。奇怪的是，IE6的行为方式我认为是正确的。（？）我把它减少到我可以的最小再现。基本上，如果您在评论附近放置任何文本，侧边栏将移动到文档的顶部，就像我预期的那样。否则，侧边栏似乎继承了以下div的上边距。

发生了什么事？

Answer 1

这种行为在我看来是正确的。浮动块元素绘制在相同的上边距处。他们必须处于同一水平。解决方法是在这里使用填充。

Answer 2

不确定浏览器为何会像这样渲染。我试了几次，发现Opera和FF都错了。虽然IE7正确渲染它。

我对CSS的了解会说div应该向左浮动而第二个div只比顶部低200px，基本上忽略了第一个div甚至存在。

通过添加clear：left到第二个div给你

<div style="margin-top: 200px; clear:both;">div with big top margin</div>

它会在Opera和FF中正确呈现，但现在它在IE7中出错了。 IE7现在增加了额外的空间。它显示在盒子下面200px而不是从顶部。

为什么浮动div有时会继承以下元素的边距？

2 个答案: