Question

这是我的jsFiddle

我只有3 div秒。第二个div浮动到右侧，第三个div出现在第二个下方。

在第3个div中，我设置了margin-top属性，此属性对布局没有任何影响。

问题：有人能解释我理解浮动的这种行为吗？

HTML

<div class="header">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>

CSS

.header {
    width: 100%;
    height: 80px;
    background-color: #abcdef;
}

.sidebar {
    margin-top: 15px;
    float: right;
    width: 200px;
    height: 200px;
    background-color: #abcdef;
    display: block;
}

.footer {
    clear: both;
    margin-top: 20px;
    width: 100%;
    height: 60px;
    background-color: #000000;
}

Answer 1

这根本不是意料之外的。 .sidebar由float属性从常规流布局中删除，因此它不再占用任何空间。 .footer有一个clear规则，所以它被强制放在任何浮点数下面，但是会自动将它放在215px（边距+侧边栏的高度）后面 < / em> 流程布局的一部分。因此，它的20px的保证金要求完全得到满足，并且它出现在其逻辑当前位置。您可以通过将上边距设置为220px来验证这一点，它将显示在侧边栏下方5px（220-215）。

您可以通过将margin-bottom:20px放在侧边栏上轻松实现您想要的效果，因为这样就需要保持与页脚的距离，将其向下推。

Answer 2

该问题与明确规则有关。

W3C - 从未对其应用许可的元素将其上边距与其父块的下边距折叠起来。

除此之外，如果你想使用clear，一般规则是在两个浮动的div之间添加一个元素，以确保你能正确地区分它们。

Answer 3

这是因为浮动元素在保证金计算方面并不存在。你的.footer低于它上面的任何未开发的元素（边距为20px）。引起此问题是因为浮点数的边距是相对于其他浮点数计算的（并非所有其他元素）。因此，为了获得所需的效果，在.sidebar中添加一个margin-bottom元素，在.footer中添加一个无意义的float，或者添加一个

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

.footer和.sidebar之间的

Answer 4

页脚div的上边距正在折叠，http://www.w3.org/TR/CSS21/box.html#collapsing-margins

如果您在边栏而不是页脚顶部添加margin-bottom，它将起作用。

css float的意外行为

4 个答案: