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

【问题标题】：What's the containing block of floated elements?浮动元素的包含块是什么？
【发布时间】：2017-05-26 01:05:50
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

您需要添加其他元素。不需要position:absolute;。它会根据您的使用方式取消浮动。如果您在元素上放置边框，您将看到它的边界border: solid blue;

标签： html css css-float css-position

【解决方案1】：

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

[...] 如果 'position' 的值为 'absolute' 或 'fixed'，则框是绝对定位的，'float' 的计算值为 'none' [...]

所以你不是想在这里找到一个浮动的包含块。你正试图找到一个absposed元素的包含块。

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

【讨论】：