父级边框塌陷不是 bug，是浮动元素脱离文档流后父容器高度为0所致，导致边框不闭合、背景不显示、后续元素上移；解决需在父容器触发bfc，推荐::after伪元素或display:flow-root。
父级边框塌陷不是 bug，是浮动元素脱离文档流后的必然结果——父容器根本“看不见”浮动子元素，自然不会为它们分配高度和空间，边框也就缩成一条线或完全消失。
float 脱离文档流导致父容器无法计算高度
浮动元素（float: left 或 float: right）会从普通文档流中移出，不再参与父容器的高度计算。即使子元素尺寸很大，父容器的 height 仍为 0，表现为：边框不闭合、背景色不显示、后续元素上移覆盖浮动区。
常见错误现象：
- 父
<div> 设置了 <code>border: 1px solid red，但只看到顶部/底部一线，左右边“断开” - 父容器
background-color完全不可见 - 紧邻父容器下方的段落或模块直接“钻进”浮动子元素区域
- 确保该元素是块级：
display: block（默认即可，但若父容器设了display: flex就会失效） - 不能写成
display: none、visibility: hidden或height: 0; overflow: hidden，否则它不占布局空间，清除无效 - 必须放在所有浮动子元素之后，且是父容器的**直接子节点**
- 如果父容器本身有
height或min-height，这个清除标签也无法突破显式高度限制 -
content: ""必须存在，否则伪元素不渲染 -
display: table比display: block更稳妥：它既触发 BFC，又避免 IE 下 margin 合并问题；若兼容要求低，display: block+height: 0+clear: both也够用 - 必须加在浮动子元素的**直接父容器**上，套多一层（如外层 wrapper）或少一层（加在子元素上）都无效
- DevTools 默认不显示伪元素，需在 Styles 面板手动展开
::after查看是否生效 - 改用
display: flow-root：专为此设计，无裁剪副作用，Chrome 58+/Firefox 57+/Safari 15.4+ 均支持 - 直接换布局模型：用
display: flex或display: grid替代 float —— 它们天然不脱离文档流，父容器高度自动包含子项，clear和clearfix在 flex 容器里完全无效 - 慎用
overflow: hidden：虽能触发 BFC，但可能意外裁剪position: absolute子元素、阴影、下拉菜单等溢出内容
手动加 clear: both 空标签为什么有时无效
在 HTML 中插入 <div style="clear: both"></div> 是最直觉的做法，但它生效的前提是：这个空标签必须是块级、参与文档流、且未被隐藏或压缩到零尺寸。
实操建议：
::after 伪元素清除比空标签更可靠的原因
伪元素方案（.clearfix::after）本质是用 CSS “生成一个看不见但占位”的清除节点，避免污染 HTML 结构。但它要真正起作用，几个细节缺一不可：
现代项目里该不该还用手动清除浮动
不该。除非你在维护老系统、对接 CMS 输出或第三方组件，否则优先用更干净的方案：
最容易被忽略的一点：清除浮动从来不是子元素的事，而是父容器的职责；调试时盯着子元素调 float，却忘了给父容器加 clearfix 或 flow-root，问题永远在那儿。
