块级元素是否会忽略浮动元素？

Question

块级元素是否会忽略浮动元素？

3

W3C指出：

由于浮动框不在流中，所以在浮动框之前和之后创建的非定位块级盒子会垂直地像浮动框不存在一样。但是，为了给浮动框留出边距框的空间，与浮动框相邻的当前行框和后续行框会被适当地缩短。

对于div，这个效果符合预期：

#a
{
 width: 100px;
 height: 100px;
 background-color: blue;
 float: left;
}

#b
{
 width: 200px;
 height: 200px;
 display: block;
 border: 1px solid black;
 background-color: red;
}

<body>
 <div id=a></div>
 
 <div id=b></div>
</body>

Here the red div is block-level element, therefore it's ignoring the floating one. (if I changed red one to display: inline-block it would appear next to floating one)

但是，如果我对一张图片应用display: block，它不会忽略浮动的div，为什么呢？

#a
{
 width: 100px;
 height: 100px;
 background-color: blue;
 float: left;
}

#b
{
 width: 200px;
 height: 200px;
 display: block;
 border: 1px solid black;
}

<body>
 <div id=a></div>
 
 <img id=b src="https://www.gravatar.com/avatar/5cb44dcd4ebddfea3ede8c6d46b02795?s=328&d=identicon&r=PG&f=1">
</body>

- PcAF

值得指出的是，当你考虑到float的首要目的是将内容围绕在像杂志文章中的图片周围时，这种行为是直观的。 - TylerH

2个回答

0

W3C

当我查看W3C时，这两个问题引起了我的注意。它将其视为行框。

浮动框被移动到左侧或右侧，直到其外边缘接触包含块的边缘或另一个浮动框的外边缘。如果存在行框，则浮动框的外部顶部与当前行框的顶部对齐。

当存在满足以下四个条件的垂直位置时，行框位于浮动框旁边：(a)在行框顶部或以下，(b)在行框底部或以上，(c)在浮动框的上边缘下方，(d)在浮动框的下边缘上方。

- Ragxion

一个块级盒子不能出现在行内盒子中。 - BoltClock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

在你引用的几段之后，规范中写道：

“表格、块级替换元素或在正常流中建立新的块格式上下文（例如具有除 'visible' 以外的 'overflow' 属性的元素）的元素的边框框不能覆盖与元素本身相同的块格式上下文中任何浮动的边距框。”

虽然您已将 display: block 应用于图像，但作为图像，它是替换元素，因此浮动不能侵入其边界。

只有不建立块格式上下文且处于与浮动相同的流中的非替换块框可以忽略浮动。¹ 块级替换元素不是块框，因为替换元素不能是块容器框。²

¹ _{你可能会想，“这是一个非常具体的陈述”，而且确实如此。这就是为什么像“块元素”这样的术语在 CSS 中被认为是极其模糊的。再说，CSS 本身定义了几乎同样模糊的术语，比如“块框”，特指既是块级框又是块容器框的框。}

² _{这意味着“非替换块框”有点自我重复，这强调了该语句的具体性。}