为什么在不使用属性float？</div>的情况下使用其中一个<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实际上位于前两个浮动div之后，尽管是行框（ div3）坐在他们下面，因为线框是唯一浮动尊重的元素。换行符是属于inline formatting context

的元素

来自2.1 Spec

  

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就像浮动不存在一样。但是，根据需要缩短浮动旁边创建的当前和后续行框，以便为浮动的边距框留出空间。

http://jsfiddle.net/Adv2v/

Answer 2

如果你的div1和div2周围有一些边距，你可以看到div3：

<h2>Why it breaks...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;">div3</div>

<h2>How to fix it...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;overflow: auto;">div3</div>

但是，可以使用div3上的overflow: auto轻松修复此问题。

请参阅小提琴：http://jsfiddle.net/audetwebdesign/jv7YB/

为什么你会看到这种效果

你的div3在流程中，指定的高度和宽度为100px，背景颜色为绿色。

如果没有浮动，您会看到位于视口左上角的绿色方块是父元素。在绿色方块内，文本（更准确地说，包含文本的线框）位于左上角。

添加浮动时，浮动点从视图端口的左上角开始定位，并绘制在任何常规的流入内容上。

但是，包含div3文本的行框缩短为浮动空间，但内联框被按下，因为div3容器中没有空间来包含浮动和原始文本。

div3容器的背景与包含文本的行框分开，并且没有按照人们的预期推下。

当你将overflow: auto应用于div3块时，它会创建一个新的块格式化上下文，div3块就像一个独立的单元，因此绿色背景包含内容和任何子元素。

参考文献

有关堆叠顺序以及背景颜色的绘制方式，请参阅：http://www.w3.org/TR/CSS2/zindex.html#painting-order

对于块格式化上下文：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

有关块格式化上下文实现原因的更多信息，请参阅：
Why does CSS2.1 define overflow values other than "visible" to establish a new block formatting context?由BoltClock

提供{{3}}

Answer 3

那是因为浮动元素不占用空间，所以你的身体不够高，你的元素将是不可见的。如果你在第二个div之后添加了很多中断，你会看到div。

Answer 4

绿色背景在那里，但它在你的yellow DIV后面。文本和内联元素环绕浮动元素，因此“div3”文本被推下来。

https://developer.mozilla.org/en-US/docs/Web/CSS/float

  

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。浮动元素是float的计算值不是none的元素。

Answer 5

替代解决方案是给你的非浮动div一个左边距，浮动宽度之和的大小。在这种情况下，200px。当然，这要求你确切地知道那些浮动的有多宽。

JSFiddle

或者，将浮动的那些放入非浮动的那个并增加其宽度，在这种情况下为300px。但同样，这需要你知道漂浮的有多宽。

JSFiddle