css - float div : overlapping boxes, 但第二个框上的内容仍被下推

Question

我有以下 HTML:

<div id = "container">
    <div class="block pink float"></div>
    <div class="green block">A</div>
</div>

和以下 CSS:

    .block {
        width: 200px;
        height: 200px;
    }

    .float { float: left; }
    .pink { background: #ee3e64; }
    .green { background: green; }

我在输出中看到绿色框隐藏在粉红色下方？为什么会这样？而且，为什么 A 没有显示在绿色框内？

请看这里的代码:

http://jsfiddle.net/mazdakiat/cu9Cr/

Answer 1

当你 float 一个元素时，它会脱离正常流动。因此，通过 float 粉红色，您可以让绿色 block 滑入其下方。不过，绿色 block 内的 A 是不同的。这是一个 child ，粉红色 block 推送该内容。它出现在下方是因为粉红色 block 完全覆盖了绿色 block 并将内容推出底部。请参阅此 fiddle 以获得更好的图片。

http://jsfiddle.net/cu9Cr/1/