提问人:Alfredo 提问时间:11/7/2023 最后编辑:IP002Alfredo 更新时间:11/7/2023 访问量:38
float 是用于块元素还是内联元素?
Is float used for block or inline elements?
问:
所以 float 是用来将块元素包裹在另一个元素周围,还是用来将内联元素包裹在另一个元素周围?为什么两个来源有区别?
答:
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 是:
评论