CSS。浮动用于块或内联元素？

Question

1. 浮动 — 应用浮动值（例如 left）可能会导致块级元素沿着元素的一侧环绕。 来源

2. 浮动CSS属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。 来源

那么 float 是用来将块元素包裹在另一个元素周围还是用来将内联元素包裹在另一个元素周围？为什么两个来源有差异？

Answer 1

那么 float 是用来将块元素包裹在另一个元素周围还是用来将内联元素包裹在另一个元素周围？

规范最相关的部分说：

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

看这个例子：

#float {
    float: left;
    outline: solid red 3px;
    width: 30%;
    padding: 2em;
}

#not-float {
    outline: dotted blue 3px;

}

<div id="float">Float</div>
<div id="not-float">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>

div

穿过浮动体（您可以看到轮廓重叠），而由其中的文本生成的行框环绕浮动体。

请注意，它是由元素和文本生成的 boxes，而不是元素本身。

为什么两个来源有差异？

因为 MDN 是：

由志愿者撰写（您可以考虑报告
• 问题或提交拉取请求），他们通常非常好，但并不完美。
尝试以比规范更容易理解的方式解释事物，而简化可能会丢失细节。