为什么块元素在浮点后面并且内联到处？

Question

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

我理解浮动一个元素将它从文档的流中取出,因此它之后的元素将呈现在它下面,因为它们对它们是不可见的.

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

Answer 1

为什么内联元素会四处流动 float?

来自MDN：

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

float 起源：

在图像周围流动文本的做法可以追溯到很长很长一段时间。这就是为什么从 Netscape 1.1 开始将这种能力添加到 Web 中的原因，也是为什么CSS 使使用属性 float 成为可能的原因。

复杂螺旋咨询

Sofloat旨在解决这个特殊问题：

考虑这个数字：

以及产生它的标记结构：

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

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

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

Answer 2

浮动元素的设计使其始终浮动到父元素的左侧或右侧。但它不包括内容部分。内容部分始终遵循浮动元素（就像您所说的）。

基本上， display:block和display:inline之间的差异非常小。

display:block代表块或容器，它水平包裹一个完整的父 div 并具有 margin 和 padding 属性。因此，它可能表现为父容器，因此 float 覆盖了它的部分。

显示：内联主题为内容而不是容器。它没有填充或边距属性，因此它被视为内容的一部分。这就是为什么它遵循浮动元素。即使您在display:block元素中添加一些内容，您也会看到该内容位于float元素之后。