浮动导致父容器高度塌陷是根本问题，因浮动元素脱离文档流使父容器高度为0；clearfix方案最稳妥，通过伪元素强制包裹；flexbox更推荐但需注意ie10以下兼容性；overflow:hidden有隐藏阴影、裁剪浮层等副作用。
浮动导致父容器高度塌陷是根本问题
当子元素使用 float: left 或 float: right 时，它们会脱离文档流，父容器无法感知其高度，表现为“内容没显示出来”或“下方元素往上顶”。这不是对齐问题，而是容器高度变成 0 的视觉错觉。
clearfix 是最稳妥的清除浮动方案
直接给浮动元素的父容器添加 clearfix 类（配合伪元素），能强制容器包裹浮动子项。不要依赖 overflow: hidden 这类副作用方案——它可能裁剪阴影、下拉菜单或 transform 动画。
- 在 CSS 中定义：
.clearfix::after { content: ""; display: table; clear: both; } - HTML 中给父容器加上：
class="clearfix" - 注意：IE6/7 需额外加
*zoom: 1触发 hasLayout，现代项目可忽略
Flexbox 替代方案更推荐但要注意兼容性
如果不需要支持 IE10 及以下，用 display: flex 直接替代浮动布局，天然不存在塌陷问题，也无需 clearfix。
- 父容器设为：
display: flex，子项自动沿主轴排列 - 想左对齐用：
justify-content: flex-start（默认值） - 想撑满一行且等宽？加：
flex: 1到每个子项 - 注意：
float和display: flex同时存在时，float会被忽略
为什么 overflow: hidden 不是好选择
虽然加 overflow: hidden 能让父容器“看起来”有高度，但它本质是靠触发 BFC 来包裹浮动，副作用明显：
立即学习“前端免费学习笔记（深入）”；
- 子元素若设置了
position: absolute且超出父容器范围，会被隐藏 - 带
box-shadow的子项，阴影可能被截断 - 下拉菜单、Tooltip 等悬停浮层，一旦超出父容器就不可见
- 配合
transform做动画时，渲染行为可能异常
这些细节在开发后期才暴露，比写两行 clearfix 更难排查。
