浮动导致父容器高度塌陷应触发BFC，首选clearfix方案：.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}，需同时使用伪元素且加在父容器上。
浮动元素导致父容器高度塌陷怎么办
父容器没高度，里面浮动的子元素就“飘”出去了，后面的内容自然会上移覆盖——这不是重叠，是塌陷引发的视觉重叠。根本原因是浮动元素脱离文档流，父容器无法感知其高度。
解决思路不是强行给父容器设高度（破坏响应性），而是触发其 BFC（块级格式化上下文）来包含浮动子元素。最常用、兼容性最好的方式就是 clearfix。
常见错误：只给子元素加 clear: both，但没解决父容器自身塌陷；或者用 overflow: hidden 粗暴触发 BFC，却可能意外裁剪阴影、下拉菜单等溢出内容。
怎么正确写一个兼容 IE8+ 的 clearfix
标准的 clearfix 是一段 CSS 类，加在浮动元素的父容器上。它利用伪元素在末尾插入一个清除浮动的“占位”，同时不破坏结构语义。
立即学习“前端免费学习笔记（深入）”；
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
-
::before和::after必须同时存在，否则 IE8 下可能失效 - 不要省略
display: table，这是触发 IE8 兼容的关键（IE8 不支持display: block在伪元素上正确清除） - 如果项目完全不需要 IE8 支持，可用更简洁的现代写法：
* { display: block; clear: both; }配合::after即可
为什么有时候加了 clearfix 还是重叠
加了类但没生效，往往不是 clearfix 本身的问题，而是使用姿势不对。
- 忘记给父容器添加
class="clearfix"，只加在子元素上无效 - 父容器本身设置了
height或min-height，覆盖了 clearfix 的高度计算 - 子元素用了
position: absolute或float混用，导致部分元素仍脱离流，clearfix 只管浮动，不管绝对定位 - CSS 优先级冲突：其他样式（如第三方库）重置了
::after的content或clear
现在还该优先用 clearfix 吗
如果项目已全面支持 Flexbox 或 Grid，clearfix 就不是首选方案了。浮动本就不是为布局设计的，只是历史妥协。
替代建议：
- 单行多列：用
display: flex+flex-wrap: wrap - 网格类布局：直接上
display: grid，一行定义行列关系 - 仍需兼容老浏览器？那
clearfix仍是目前最稳的兜底手段，别为了“不用 float”而强行用 JS 计算高度
真正容易被忽略的是：很多所谓“重叠”，其实源于 margin 折叠、line-height 溢出或字体度量差异，未必和浮动有关——先确认是否真由浮动引起，再动手加 clearfix。
