html – CSS Float – 内容保持在默认堆栈位置

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

如果我给浮动：左边第一个div,第二个div上升(这很好,因为浮动元素从正常文档流中取出)

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

Jsfiddle如下

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像素.当你将一个浮动到另一个上面时,第二个框中没有剩余的水平空间用于其内容,因为它完全被浮动占据,因此内容必须包裹到下一行(并且溢出100像素的高度)处理).

如果你使第二个框更宽,the content will appear next to the float：

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

但是,内容永远不会出现在float之后,因为内联内容总是会包围浮点数(否则浮动将不会非常有用).