浮动导致父容器高度塌陷时，overflow: hidden触发BFC是最简方案；clearfix通过伪元素清除浮动，兼容旧浏览器；clear: both不能直接写在父元素上，因它仅对兄弟元素生效。
浮动元素导致父容器高度塌陷的典型表现
父元素没有设置固定高度，内部只有 float: left 或 float: right 的子元素时，父元素在渲染后高度变为 0，背景、边框、内边距等视觉样式全部失效。常见于导航栏、图文混排、卡片栅格等场景。
用 overflow: hidden 触发 BFC 是最简方案
给父容器添加 overflow: hidden（或 overflow: auto）可强制其创建一个新的块级格式化上下文（BFC），从而包含内部浮动元素，恢复正确高度。这是兼容性好、代码少、无额外 DOM 的首选方式。
- 注意：若父容器本身需要内容溢出（比如横向滚动），
overflow: hidden会意外裁剪内容，此时不可用 -
overflow: auto在部分旧版 Safari 中可能触发不必要的滚动条，overflow: hidden更稳妥 - 该写法对 Flex / Grid 容器无效——它们天然不参与传统浮动流，无需此处理
.container {
overflow: hidden;
}
用 clearfix 类应对需要复用或兼容老项目的场景
当项目中多个组件需统一清除浮动，或需支持 IE6–8 时，clearfix 是更可控的选择。它通过伪元素在父容器末尾插入一个清除浮动的“占位”，不影响布局逻辑。
- 现代写法推荐使用
::after伪元素 +clear: both，避免污染 HTML 结构 - 必须同时设置
content: ""和display: table（或block），否则伪元素不生效 - IE6/7 需额外声明
*zoom: 1触发 hasLayout
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
为什么不能只靠 clear: both 放在父容器上？
clear 属性只对**自身为块级元素且处于浮动元素之后的兄弟元素**生效，对父容器自身无效。把 clear: both 写在父元素上，浏览器会忽略——它不是“清浮动”，而是“避开浮动”。这也是初学者最常踩的误区。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.container { clear: both; }—— 完全无效 - 有效写法只能是：在浮动元素**之后插入一个新元素**并设
clear: both，或用伪元素模拟该元素 - Flexbox 和 Grid 布局下浮动本身已过时，强行混用反而增加理解成本和维护负担
