什么是浮动元素的包含块?

时间:2017-01-11 09:51:03

标签: html css css-float css-position

In css2.1 spec,它说:

  

浮动框向左或向右移动,直到其外边缘接触包含块边缘或另一个浮动边缘的外边缘。

我想知道浮动元素的包含块是什么,我测试了:

body {
    position: relative;
    margin: 5px;
    padding: 10px;
}

p {
    float: left;
    position: absolute;
    margin: 10px;
}

<body>
    <p>hehe</p>
</body>

根据css2.1 spec,绝对定位元素的包含块是最近定位的块容器的填充框。

但是在上面的代码中,浮动元素浮动到内容框边界。我很困惑如何找到浮动元素的包含块。

1 个答案:

答案 0 :(得分:1)

你的问题的前提是有缺陷的。绝对定位的元素不能浮动,浮动不能绝对定位。来自section 9.7

  

[...] 如果&#39;位置&#39;有绝对的价值&#39;或者&#39;固定&#39;,该框绝对定位,计算值为&#39;浮动&#39;是没有#39; [...]

因此,您并未尝试在此处找到浮动的包含块。您正试图找到一个包含的元素的包含块。

话虽如此,如果你真的必须知道,浮点数的包含块与我在my answer to your previous question中描述的相对定位或非定位元素相同,因为浮点数不能被调整。