html - css float 的意外行为

Question

这是我的 jsFiddle

我只有 3 个 div。第二个 div 向右浮动，第三个 div 出现在第二个的正下方。

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

问题:有人可以解释我对 float 的这种行为的理解吗？

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 规则，因此它被强制置于任何 float 下方，但这会自动将其置于 < strong>是流布局的一部分。这样它的 20px 边距要求就完全满足了，它出现在它的逻辑当前位置。您可以通过将上边距设置为 220px 来验证这一点，它将显示在侧边栏下方 5px (220-215) 处。

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