浮动元素是否会忽略填充?

时间:2016-08-07 21:05:41

标签: html css css-float padding

This回答说:

  

当你浮动元素时,它会有效地将其从文档流中取出,因此向其父元素添加填充不会对其产生影响。 [...]

同样MDN states

  

[...]当元素浮动时,它将从文档的正常流程中取出。它向左或向右移动,直到它接触包含框的边缘或其他浮动元素。

好吧,不知何故,我在父元素中添加了填充,并且浮动的元素被移位了:

JSFiddle

HTML:

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

CSS:

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

#parent
{
    padding: 100px;
}

1 个答案:

答案 0 :(得分:3)

否。浮动不会忽略其容器的填充。

浮动的包含块由容器的内容边建立:

  

10.1 Definition of "containing block"

     

包含块由最近的内容边缘形成   块容器祖先盒。

该内容边缘受到容器填充的影响:

  

8.1 Box dimensions

     

enter image description here

并且浮动物不能到达顶部或左侧而不是它们的包含块。

  

Float rules

     

左浮动框的左外边缘可能不在其包含块的左边缘的左侧。类似的规则适用于右浮动元素。

     

浮动框的外部顶部不得高于其包含块的顶部。