W3C声明 ：
由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就像浮动不存在一样 。 但是，根据需要缩短浮动旁边创建的当前和后续行框，以便为浮动的边距框腾出空间。
这项工作正如预期的那样：
#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>
这里红色
div是块级元素，因此它忽略了浮动的元素。 （如果我更改了一个红色
display: inline-block它会出现在浮动
display: inline-block旁边）
但是，如果我将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>
W3C states that:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
This work as expected with divs:
#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)
But, if I apply display: block to an image ,it won't ignore the floating div, Why?
#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>
最满意答案
在您引用的一段之后的几段，规范说：
表的边框，块级替换元素或正常流中建立新块格式化上下文的元素（例如“溢出”除“可见”之外的元素）不得与边框重叠与元素本身相同的块格式化上下文中的任何浮点数。
虽然你已经将display: block应用于你的图像，但作为一个图像，它是一个被替换的元素，因此浮动不能侵入它的边界。
只有未建立块格式化上下文并且与浮点数在同一流中的未替换块框可能会忽略浮点数。 1块级替换元素不是块框，因为替换元素不能是块容器框。 2
1 你可能在想， 这是一个荒谬的具体陈述 ，而且确实如此。 这就是为什么像“块元素”这样的术语在CSS用语中被认为是非常模糊的。 再说一遍，CSS本身定义了几乎同样模糊的术语，如“块框”，专门引用既是块级框又是块容器框的框。
2 这确实意味着“未被替换的块区块”在某种程度上是重言式，这强化了该陈述的具体可笑性。
Several paragraphs after the one you quote, the spec says:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.
Although you've applied display: block to your image, being an image it's a replaced element, and therefore the float cannot intrude into its bounds.
Only non-replaced block boxes that don't establish block formatting contexts and are in the same flow as a float may ignore the float.1 A block-level replaced element is not a block box, because a replaced element cannot be a block container box.2
1 You're probably thinking, that's a ridiculously specific statement, and it is. It's why terms like "block element" are considered extremely vague in CSS parlance. Then again, it doesn't help that CSS itself defines almost equally vague terms like "block box" to specifically refer to boxes that are both block-level boxes and block container boxes.
2 This does imply that "non-replaced block box" is somewhat of a tautology, which reinforces just how ridiculously specific that statement is.
更多推荐
浮动,float,block,display,div,电脑培训,计算机培训,IT培训"/> <meta name="de
发布评论