浮动导致父容器高度塌陷，文字“掉”出容器外，本质是父容器未包裹浮动子元素；解决关键是触发BFC，推荐clearfix（伪元素::after生成content+display:table+clear:both）或现代display:flow-root。
浮动元素导致父容器高度塌陷，文字跑出容器外
这是最典型的错位现象：子元素用了 float: left 或 float: right，父容器没设高度，结果里面文字“掉”到浮动元素下方，看起来像错位或重叠。本质不是文字错位，是父容器根本没包裹住内容。
解决思路不是调文字位置，而是让父容器重新“感知”浮动子元素的高度。最直接有效的是触发 BFC（块级格式化上下文），clearfix 就是为此设计的一套兼容性写法。
- 别用
overflow: hidden简单收场——它会意外裁剪position: absolute子元素或阴影、下拉菜单等溢出内容 -
display: flow-root是现代方案，但 IE 完全不支持，若需兼容 IE11 及更早版本，必须回退到clearfix - 如果父容器本身有
border或padding，用clearfix不会影响这些样式；而overflow: auto可能在某些浏览器里加滚动条（哪怕没溢出）
标准 clearfix 的写法和为什么必须用 :after
老式 .clearfix { zoom: 1; }（IE hack）已淘汰，当前推荐的写法依赖伪元素清除浮动，核心在于：必须用 :after，不能用 :before，也不能只靠 clear: both 而不生成内容。
原因很实际：:before 插在内容最前面，清不掉后面浮动元素造成的塌陷；只有 :after 插在末尾，且生成一个“看不见但占文档流”的块，才能真正把浮动撑下来。
立即学习“前端免费学习笔记（深入）”；
`.clearfix::after {
content: "";
display: table;
clear: both;
}`
-
content: ""必不可少——没有内容，伪元素不渲染，clear失效 -
display: table比block更稳妥：避免某些旧版 Chrome 对clear的解析异常，同时不触发 margin 合并 - 不要写
display: block; height: 0; overflow: hidden;——这在 Safari 旧版本中可能无法清除右浮动
Flex/Grid 布局下还用不用 clearfix
完全不用。一旦父容器设了 display: flex 或 display: grid，浮动就失效了——子元素的 float 属性会被忽略，自然不存在塌陷问题。
但要注意真实场景中的混合写法：比如你给父容器加了 display: flex，却还在子元素上写了 float: left，这时不仅清除无效，还会干扰 flex 排列逻辑，造成意料外的错位或空白。
- 检查是否误留了历史浮动代码——搜索项目里所有
float:声明，确认它们是否真有必要 - 如果只是想实现“左对齐+自动换行”，用
flex-wrap: wrap+justify-content: flex-start更可控 - 部分 UI 库（如 Bootstrap 4+）默认用 Flex，此时再套一层
clearfix不仅多余，还可能因 display 冲突导致样式异常
移动端适配时 clearfix 的隐藏风险
在 iOS Safari 或 Android WebView 中，如果 clearfix 用在含有 transform 或 will-change 的容器上，偶尔会触发渲染层分离异常，导致文字模糊、错位或闪烁。
这不是 clearfix 本身的问题，而是伪元素与硬件加速层交互的副作用。临时解法是绕开伪元素，改用更轻量的 BFC 触发方式。
- 优先尝试
display: flow-root（Chrome 64+/Firefox 59+/Safari 15.4+ 支持良好） - 若必须兼容 Safari 13–15.3，可用
display: inline-block+width: 100%替代，但注意它会让父容器变成内联级，可能影响布局上下文 - 绝对避免在
position: fixed或transform: translateZ(0)容器上叠加clearfix—— 这类组合最容易暴露渲染缺陷
浮动本身已是过时布局手段，clearfix 是为兼容兜底存在的补丁。真正容易被忽略的，是那些没被删干净的 float 遗留代码——它们藏在某个组件深层，某次重构后突然在某个机型上让文字“飘”起来。
