浮动导致父容器高度塌陷，边框视觉上“压”在子元素上；修复核心是让父容器重新获得正确高度，推荐用 display: flow-root 创建bfc，兼容性较好；老浏览器可用::after伪元素清除浮动。
浮动元素导致父容器高度塌陷，边框自然“叠”在子元素上
这不是边框真重叠了，而是父元素没包裹住浮动子元素，border 画在了高度为 0 或极小的盒子里，视觉上像“压”在浮动块上。常见于 float: left 的导航栏、图文混排等场景。
修复核心是让父容器「重新获得正确的高度」，而不是强行调边框或 margin。
- 别用
height或min-height硬撑——内容变长就失效 - 避免只靠
clear: both放在末尾空标签里——语义差、DOM 污染 - 慎用
overflow: hidden——会意外裁剪position: absolute子元素或阴影
推荐用 display: flow-root 主动创建 BFC
这是目前最干净、无副作用的修复方式。它显式触发块级格式化上下文（BFC），让父容器自动包含浮动子元素，且不影响溢出行为。
.container {
display: flow-root;
border: 1px solid #333;
}
兼容性：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+。若需支持 IE 或老 Safari，往下看备选方案。
兼容老浏览器时，::after 伪元素清除浮动更稳
比 <div style="clear:both"></div> 更轻量，不污染 HTML 结构，且不会被误删或遗漏。
.container::after {
content: "";
display: table;
clear: both;
}
注意点：
- 必须加
content: ""，否则伪元素不渲染 -
display: table比block更稳妥——避免某些旧版 Chrome 对display: block+clear的计算偏差 - 如果父元素本身是
inline或flex容器，此方法仍有效；但若已是grid，浮动本身就不该存在
浮动不是布局首选，但真要用，记得「清浮动」是父容器的事
很多人在浮动子元素上加 clear，或者试图用 margin-bottom 推开边框——这治标不治本。边框属于父容器的盒模型，问题根源永远在父容器是否参与了 BFC。
另外，float 在现代布局中已基本被 flex 和 grid 取代。如果只是想实现两栏、文字环绕图片等效果，优先查 shape-outside 或 display: flex ——浮动带来的清除成本，远高于重构一两行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
