Question

We learned absolute，fixed定位和float属性会使元素脱离正常流程。

<div class="pink float"></div>
<div class="blue float"></div>
<div class="green"></div>
<div class="orange"></div>

两个第一个盒子向左浮动，超出正常流量，所以后两个盒子填满了它们的空间，因此绿色盒子在红色下面。

但是，这个怎么样？ http://jsfiddle.net/WKQgL/24/

<div class="pink float"></div>
<div class="blue float"></div>
<div class="yellow">Well, why this text is out of the DIV?</div>
<div class="green"></div>
<div class="orange"></div>

我们发现文字没有放在方框下面并且发生在底部，为什么？

在另一个例子中：有一个段落和浮动图像：

<img src="example.jpg" style="float:right">
<p>This is a long paragraph surrounding the image</p>

在结果中，我们看到右侧浮动的图像，该段落包围了它。比较当我们使用absolute作为图像时，文本会在图像下面。我们说absolute和float从正常流程中取出元素，那有什么区别？

Answer 1

该段落是块级的，因此需要可用的剩余宽度。因此，非浮动块被迫包裹在浮动元件下方。

Answer 2

第二个例子来自W3C - Floats

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

这就是黄色块在粉红色块下方流动的原因。

通常文本会在浮动的一侧流动。但在这种情况下，line boxes被限制为包含黄色块的宽度，并缩短它们以便为浮动腾出空间。缩短导致零宽度线框，现在遵循

如果缩短的行框太小而无法包含任何内容，则行框向下移动（并重新计算其宽度），直到某些内容适合或不再存在浮动。

这就是文本（行框）的行为与包含黄色块的行为不同的原因。

您的第三个示例显示float的特殊属性，而不是absolute定位。使用float时，会缩短行框。使用absolute，这不会发生。我创建了这个JSFiddle以显示差异。由于img是透明的，因此您可以在p元素下方看到img元素（虚线）

<h1>float: right</h1>
<img class="float" src="http://lorempixel.com/200/200"/>
<p>Lorem ipsum ...</p>
<h1 class="clear">position: absolute</h1>
<img class="absolute" src="http://lorempixel.com/200/200"/>
<p>Lorem ipsum ...</p>

img {
    opacity: 0.5;
}
img.float {
    float: right;
}
p {
    border: 1px dotted black;
}
.clear {
    clear: both;
}
img.absolute {
    position: absolute;
    right: 8px;
}

Answer 3

背景只占用元素的空间（并从顶部角落开始），而在p中你有文本，它填充了行的其余部分（因为它没有固定的宽度）。

Answer 4

您已在块类中定义了宽度。如果添加p{width: 200px;}，文本块将按预期运行。

Answer 5

段落元素正在浮动的DIV下面，就像绿色div一样（注意绿色div被推了一下），但文本不是。我认为这是文本的正常行为，以包裹其中未包含的块级元素。

将<p>替换为<div>并获得相同的行为：http://jsfiddle.net/WKQgL/25/

了解浮动使元素脱离正常流动问题

5 个答案: