Question

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

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

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

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

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

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

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

Answer 1

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

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

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

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

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

1 个答案: