css float的意外行为

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最后一个元素的后面是流布局的一部分.因此,它的20px的保证金要求完全得到满足,并且它出现在其逻辑当前位置.您可以通过将上边距设置为220px来验证这一点,它将显示在侧边栏下方5px(220-215).

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