浮动导致父容器高度塌陷，文字“上浮”至浮动元素下方，并非遮挡而是布局错位；推荐用display: flow-root创建BFC修复，其次伪元素清除，避免overflow: hidden引发裁剪等问题。
浮动元素导致父容器高度塌陷，文字被遮挡
这是最常见原因：子元素用 float 脱离文档流后，父容器无法感知其高度，后续文字会“上浮”到浮动元素下方，看起来像被遮住。实际不是遮挡，而是布局错位。
用 clear 清除浮动的几种写法及区别
clear 本身不解决塌陷，只控制元素自身不与浮动元素同侧排列。真正起作用的是它触发的 BFC（块级格式化上下文）或作为清除节点的占位行为。
-
clear: both放在浮动元素之后的兄弟元素上，可让该元素下移避开浮动区，但父容器仍塌陷 - 更可靠的是在父容器末尾加一个空元素：
并设
.clearfix { clear: both; height: 0; overflow: hidden; } - 现代推荐用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }——兼容性好，无需额外 HTML
CSS 新标准方案：用 display: flow-root 替代清除
这是目前最干净的解法。flow-root 强制创建 BFC，使父容器能正确包裹浮动子元素，且不引入额外 DOM 或 hack。
- 只需给父容器加一句：
display: flow-root - 支持 Chrome 64+、Firefox 58+、Safari 15.4+，Edge 79+；IE 完全不支持
- 比
overflow: hidden更安全：不会意外裁剪阴影、定位子元素或滚动条 - 如果项目需兼容 IE，不能单独依赖此方案
为什么不要用 overflow: hidden 硬撑高度？
虽然 overflow: hidden 也能触发 BFC 让父容器包含浮动，但它副作用明显，容易引发隐藏问题。
立即学习“前端免费学习笔记（深入）”；
- 子元素使用
position: absolute且超出父容器时，会被直接裁剪不可见 - 带
box-shadow的浮动元素可能被截断 - 父容器若有滚动需求（如内容溢出），
hidden会关掉滚动能力 - 某些动画或 transform 效果在
overflow: hidden下渲染异常
flow-root 是首选，::after 清除是保底，overflow: hidden 是要留心的陷阱。 
