html - 为什么在不使用属性 float 的情况下使用 <div> 之一时 float 在此示例中不起作用？

Question

为什么div3没有显示我定义的绿色？？

<div style="width:100px;height:100px;background-color:#ffff00;float:left">
div1
</div>

<div style="width:100px;height:100px;background-color:#0000ff;float:left">
div2
</div>

<div style="width:100px;height:100px;background-color:#00ff33">
div3
</div>

为什么会这样？但是当我应用属性 float="left"时它显示绿色，当我应用 float="right"时它也可以工作，但是当 div3 中没有 float 属性时绿色没有显示为什么？

Answer 1

因为 floated元素从 normal flow 中取出(不完全像绝对定位元素)- HTML 中的第三个 div 实际上位于前两个 float div 的后面，尽管行框 (div3) 位于它们下方，因为行框是只有 float 尊重的元素。行框是属于 inline formatting context 的元素。

来自2.1 Spec

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

http://jsfiddle.net/Adv2v/