CSS Float - 内容保持在默认堆栈位置 [英] CSS Float - The content stays in the default stack position

问题描述

我在页面中有两个相同宽度和高度的div。

I have two divs in the page with same width and height.

如果我给float：left到第一个div，第二个div因为浮动的元素是从正常的文档流中取出的）

if I give float: left to the first div, the second div goes up (which is fine because the floated element is taken out of the normal document flow)

但是，为什么div的内容仍然显示在默认堆栈位置？

But, why the content of the div still shows in the default stack position?

JsFiddle如下所示

JsFiddle is given below

http://jsfiddle.net/xR9Rd/2/

<div class="box0">Box 0</div>   
<div class="box1">Box1</div>

.box0 {
    width: 100px;
    height: 100px;
    background-color: brown;
    float: left;
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

推荐答案

100像素。当你将一个浮动在另一个之上时，在第二个框中没有更多的水平空间用于它的内容，因为它完全被float所占用，所以内容必须包装到下一行（并溢出100像素的

The width of each box is 100 pixels. When you float one over the other, there is no more horizontal space left in the second box for its content because it's completely occupied by the float, so the content has to wrap to the next line (and overflow the 100-pixel height in that process).

如果您将第二个框放宽，内容会显示在浮动框旁边：

If you make the second box wider, the content will appear next to the float:

.box1 {
    width: 150px;
    height: 100px;
    background-color: red;
}

内容永远不会出现在但是，因为内联内容将总是包裹浮动（否则，浮动将不是非常有用）。

The content will never appear behind the float, however, because inline content will always wrap around floats (otherwise, floating won't be very useful).

这篇关于CSS Float - 内容保持在默认堆栈位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！