浮动元素会忽略填充吗?
Do floated elements ignore padding?
This 回答指出:
When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. [...]
还有MDN states:
[...] when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.
好吧,不知何故,我向父元素添加了内边距,然后移动了浮动元素:
#a{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#parent
{
padding: 100px;
}
<!DOCTYPE html>
<body>
<div id=parent>
<div id=a></div>
</div>
</body>
</html>
没有。浮动不会忽略容器的填充。
浮动的包含块由容器的内容边缘建立:
10.1 Definition of "containing block"
the containing block is formed by the content edge of the nearest
block container ancestor box.
该内容边缘受容器填充的影响:
而且漂浮物不能比它们的包含块到达顶部或左侧。
The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
A floating box's outer top may not be higher than the top of its containing block.
This 回答指出:
When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. [...]
还有MDN states:
[...] when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.
好吧,不知何故,我向父元素添加了内边距,然后移动了浮动元素:
#a{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#parent
{
padding: 100px;
}
<!DOCTYPE html>
<body>
<div id=parent>
<div id=a></div>
</div>
</body>
</html>
没有。浮动不会忽略容器的填充。
浮动的包含块由容器的内容边缘建立:
10.1 Definition of "containing block"
the containing block is formed by the content edge of the nearest block container ancestor box.
该内容边缘受容器填充的影响:
而且漂浮物不能比它们的包含块到达顶部或左侧。
The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
A floating box's outer top may not be higher than the top of its containing block.