css - 浮动 div：重叠框，但第二个框上的内容仍被向下推

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/

​</p>

Answer 1

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

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

Answer 2

浮动粉红色框将其从文档流中取出。然后，如果粉红色的框根本不存在，则绿色框会移动到它所在的位置（元素内的文本但是环绕浮动元素）。粉红色的框显示在顶部，因为没有在任一对象上指定任何 z-index 属性，浏览器会将首先出现在 html 中的元素放置在 z-index 中高于下面的元素。

[更新] 根据下面 mrtsherman 的评论，在任何元素上设置 z-index 都不会产生任何影响，除非它们的位置设置为相对、绝对或固定。