2

这是我的jsFiddle

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

第三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;
}
4

4 回答 4

5

这一点也不意外。.sidebar由其属性从常规流布局中删除，float因此它不再占用任何空间。有.footer一个clear规则，所以它被强制放在任何浮动下方，但这会自动将它放在流布局的最后一个元素后面 215 像素（边距+侧边栏的高度）。因此，它的 20px 保证金要求完全满足，并出现在其逻辑当前位置。您可以通过将上边距设置为 220 像素来验证这一点，它将出现在侧边栏下方 5 像素 (220-215) 处。

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

于 2013-05-15T15:34:18.363 回答
1

这个问题与明确的规则有关。

W3C - 已应用清除的元素永远不会将其上边距与其父块的下边距折叠起来。

Baiscally，如果你想使用 clear，一般规则是在两个浮动 div 之间添加一个元素，以确保你可以正确地间隔它们。

于 2013-05-15T15:37:05.407 回答
0

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

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

于 2013-05-15T15:47:10.297 回答
0

这是因为浮动元素在边距计算方面并不真正存在。您的 .footer 位于其上方的任何未浮动元素下方（边距为 20 像素）。这个问题是因为浮动的边距是相对于其他浮动（不是所有其他元素）计算的。因此，要获得所需的效果，在 .sidebar 中添加一个 margin-bottom 元素，在 .footer 中添加一个无意义的浮动，或者添加一个

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

在 .footer 和 .sidebar 之间

于 2013-05-15T15:37:06.337 回答