2

为什么 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属性时绿色没有显示为什么？

4

5 回答 5

4

因为浮动元素是从正常流程中取出的（不完全像绝对定位元素） - HTML 中的第三个 div 实际上位于前两个浮动 div 后面，尽管线框 ( div3) 位于它们下方，作为线框是浮动尊重的唯一元素。行框是属于内联格式上下文的元素

从2.1 规范

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

http://jsfiddle.net/Adv2v/

于 2013-08-05T18:16:52.023 回答
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>

但是，这很容易overflow: auto在 div3 上修复。

见小提琴：http: //jsfiddle.net/audetwebdesign/jv7YB/

为什么你会看到这种效果

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

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

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

然而，包含 div3 文本的 line box 被缩短了为浮动腾出空间，但内联框被推下，因为 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

有关为什么按原样实现块格式化上下文的更多见解，请参阅：
为什么 CSS2.1 定义“可见”以外的溢出值来建立新的块格式化上下文？由BoltClock提供

于 2013-08-05T18:23:56.407 回答
1

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

于 2013-08-05T18:17:14.227 回答
0

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

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

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

于 2013-08-05T18:18:18.350 回答
0

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

JSFiddle

或者，将浮动的放在非浮动的内部并增加其宽度，在这种情况下为300px. 但同样，这需要您知道浮动的宽度。

JSFiddle

于 2013-08-05T18:27:16.037 回答