为什么CSS中父元素浮动后自身高度就不塌陷了-css教程-PHP中文网

为什么CSS中父元素浮动后自身高度就不塌陷了

父元素包含块内所有子元素都浮动时，父元素的高度计算不再受子元素影响，导致高度塌陷为零。这是因为浮动元素脱离了标准文档流，父元素的bfc（块级格式化上下文）在计算高度时无法感知到这些子元素的存在。

为什么CSS中父元素浮动后自身高度就不塌陷了

如何修复浮动导致的父元素高度塌陷问题

修复方法有多种，最常用的是为父元素添加 overflow: hidden 来触发BFC，或者使用伪元素清除浮动。这里我们采用 overflow: hidden 方案，因为它简洁且有效。

为什么CSS中父元素浮动后自身高度就不塌陷了



    <meta charset="UTF-8"><title>Float Collapse Fix</title><style>
        .container {
            border: 2px solid red;
            overflow: hidden; /* 关键代码：触发BFC */
        }
        .child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
        }
    </style><div class="container">
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>

运行上述代码，可以看到红色边框紧密包裹住两个蓝色子元素，没有发生高度塌陷。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如果父元素不设置overflow:hidden会发生什么

如果不设置 overflow: hidden，父元素的高度将变为零，因为浮动元素脱离了文档流，父元素无法“看到”它们。这会导致父元素下方的内容向上移动，覆盖原本应该由父元素占据的空间。

为什么CSS中父元素浮动后自身高度就不塌陷了



    <meta charset="UTF-8"><title>Float Collapse No Fix</title><style>
        .container {
            border: 2px solid red;
            /* 没有 overflow: hidden */
        }
        .child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
        }
        .sibling {
            background-color: green;
            padding: 20px;
        }
    </style><div class="container">
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>
    <div class="sibling">Sibling Element</div>

运行此代码，绿色兄弟元素会直接出现在红色边框上方，因为父容器高度为零。