Question

我终于开始理解CSS中的浮动，但我被困在一个部分。

我理解浮动元素会将其从文档流中取出，因此在它之后的元素会在'下面'呈现它，因为它们对它们是不可见的。

但是我很难理解为什么内联元素如果已从文档流中取出而知道浮动和流动？

Answer 1

有一些规则可以控制浮动元素，块元素和线框之间的关系。

中定义

特别要注意规范中的这一部分：

IMG框浮动到左侧。后面的内容格式化为float的右侧，从float的同一行开始。浮子右侧的线盒由于浮子的存在而缩短，但恢复正常的＃34; float之后的宽度（由P元素建立的包含块的宽度）。

换句话说，块框（例如p）将在浮动元素后面流动。但是p中包含文本的行框表示浮动元素的存在。这些只是规范中规定的规则。

Answer 2

为什么内联元素会在`float?`

附近流动

来自MDN：

float CSS属性指定一个元素应该从正常流中取出并放在其容器的左侧或右侧，其中text和inline元素将围绕它。

`float`起源：

在图片周围流动文字的做法可以追溯很久很久。这就是为什么从Netscape 1.1开始将该功能添加到Web的原因，以及为什么 CSS可以使用属性float 。

所以float旨在解决这个特殊问题：

考虑这个数字：

产生它的标记结构：

<p>
 ...text...
 <img src="jul31-03-sm.jpg" height="200" border="0" class="picture">
 ...text...
</p>
<p>
 ...text...
</p>

浮动图像从其包含元素中伸出。我们可以通过在段落中添加边框来更清楚地看到这一点：

使用float可以使段落忽略图像，而文本包裹围绕它。

Answer 3

设计

Float 元素，使其始终浮动到父元素的左侧或右侧。但它不包括内容部分。内容部分总是遵循浮动元素（就像你说的那样）。

基本上， display：block 和 display：inline 之间存在很小的差异。

display：block 表示块或者说容器，它包含一个完整的父div，并且具有margin和padding属性。因此，它可以表现为父容器，因此float覆盖它的部分。

显示：内联使内容不是容器。它没有填充或边距属性，因此它被认为是内容的一部分。这就是它遵循 float 元素的原因。即使您在 display：block 元素中添加了一些内容，您也会看到内容符合 float 元素。