Question

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

这项工作符合预期div s：

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 这里红色div是块级元素，因此它忽略了浮动元素。（如果我将红色的一个更改为display: inline-block，它将显示在浮动的旁边）

但是，如果我将display: block应用于图片，则不会忽略浮动div，为什么？

＆＃13;

#a
{
	width: 100px;
	height: 100px;
	background-color: blue;
	float: left;
}

#b
{
	width: 200px;
	height: 200px;
	display: block;
	border: 1px solid black;
}

＆＃13;

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

＆＃13;

Answer 1

在你引用的那个段落之后的几段，规范说：

表的边框，块级替换元素或正常流中建立新块格式化上下文的元素（例如“溢出”除“可见”之外的元素）不得重叠与元素本身在同一块格式化上下文中的任何浮点数的边距框。

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

只有未建立块格式化上下文且与float相同流的非替换块框可能会忽略float。¹块级替换元素不是块框，因为被替换的元素不能是块容器盒。²

¹ _{你可能在想，这是一个非常具体的声明，它就是。这就是为什么像“块元素”这样的术语在CSS用语中被认为是非常模糊的。再说一遍，CSS本身定义了几乎同样模糊的术语，如“块框”，专门引用既是块级框又是块容器框的框。}

² _{这意味着“非替换块区块”在某种程度上是重言式，这强化了该陈述的具体可笑性。}

Answer 2

W3C 这些是在观看W3C时向我发出的两件事。 ~~它将其视为一个行框。~~

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

当存在满足所有这四个条件的垂直位置时，线框位于浮点旁边：（a）位于线框顶部或下方，（b）位于线框底部或上方，（c）在浮子的上边缘下方，（d）在浮子的下边缘上方。

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

2 个答案: