overflow: hidden 通过触发 BFC 包裹浮动子元素从而撑开父容器高度，但会裁剪溢出内容；clearfix 更安全，现代推荐 flex 布局替代浮动。
为什么 overflow: hidden 能撑开父容器高度
浮动元素脱离文档流，父容器默认不计算其高度，导致“塌陷”。overflow: hidden 触发了 BFC（块级格式化上下文），而 BFC 容器会包含内部浮动元素的边界，因此自动扩展高度来包裹子元素。
但要注意：overflow: hidden 会裁剪溢出内容，如果子元素有 position: absolute 或 transform 偏移、下拉菜单、tooltip 等超出父盒的内容，会被意外截断。
- 只适用于确定不会有内容溢出的场景
- 在响应式布局中，配合
max-width或媒体查询时容易引发隐藏内容问题 - 某些旧版 Safari 对
overflow: hidden+zoom: 1组合有渲染异常
什么时候该用 clearfix 类
clearfix 是更安全、语义更明确的方案，它不改变父容器的溢出行为，只解决高度塌陷。主流写法是给父元素添加一个 class，并用伪元素清除浮动。
.clearfix::after {
content: "";
display: table;
clear: both;
}现代写法可省略 display: table，直接用 display: block：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
}- 必须确保父元素没有设置
height或max-height，否则伪元素无法生效 - 若父元素是
flex或grid容器，clear无效——此时浮动本身就不该存在，应改用 flex/grid 布局 - IE6/7 需要额外加
.clearfix { *zoom: 1; }触发 hasLayout
现代替代方案：不用浮动，改用 display: flex
浮动本就不是为布局设计的，CSS3 后，float 应仅用于文字环绕等少数场景。主布局建议直接弃用浮动，改用 display: flex：
.container {
display: flex;
}
.item {
flex: 0 0 auto; /* 或 flex: 1 */
}这样父容器天然包含子项，无塌陷风险，也无需 clearfix 或 overflow hack。
- Flex 布局对齐、换行、顺序控制更直观
- IE10+ 支持良好；如需兼容 IE9 及以下，仍得回退到
clearfix - 注意
flex容器内子元素的float会被忽略，不要混用
最容易被忽略的细节：父容器的 min-height 和 border
即使用了 clearfix 或 overflow: hidden，如果父容器设置了 min-height: 0（尤其在 Flex/Grid 子项中嵌套时），或存在 border + box-sizing: content-box，可能导致视觉上仍像“没撑开”。
- 检查 computed style 中
height是否真为 0 —— 有时只是背景色没延伸，实际高度已正常 - 用浏览器开发者工具的 Layout 面板查看“Margin / Border / Padding”是否遮挡了内容区域
- 若父容器是
position: absolute或fixed，浮动子元素的行为会进一步不可控，应避免
