float 是用于块元素还是内联元素?

Is float used for block or inline elements?

提问人:Alfredo 提问时间:11/7/2023 最后编辑:IP002Alfredo 更新时间:11/7/2023 访问量:38

问:

  1. 浮点值 — 应用浮点值(如 left)可能会导致块级元素沿元素的一侧换行。

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

所以 float 是用来将块元素包裹在另一个元素周围,还是用来将内联元素包裹在另一个元素周围?为什么两个来源有区别?

css css -浮点数

评论


答:

1赞 Quentin 11/7/2023 #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

请注意,它是关于元素和文本生成的,而不是元素本身。

为什么两个来源存在差异?

因为 MDN 是:

  • 由志愿者编写(您可以考虑报告问题提交拉取请求),他们通常非常出色,但并不完美。
  • 试图以比规范更易于理解的方式解释事物,而简化可能会丢失细节。