父容器高度塌陷导致边框不可见，因浮动元素脱离文档流使父容器高度为0；清除浮动需触发BFC，推荐::after伪元素或display:flow-root。
父容器高度塌陷导致边框不可见
浮动元素脱离文档流后，父容器无法感知其高度，计算高度时直接忽略浮动子元素。如果父容器只有浮动子元素、没有其他非浮动内容，它的 height 会变成 0 —— 此时即使设置了 border，也因高度为零而“看不见”。这不是边框真的消失了，而是容器没空间渲染它。
常见触发场景和验证方式
典型结构如下：父容器设了 border: 1px solid #000，内部两个子元素都用了 float: left，但父容器没有设置固定高度或清除浮动。此时用浏览器开发者工具检查父容器的 computed height，大概率是 0px。
.container {
border: 1px solid #000;
}
.box {
float: left;
width: 200px;
height: 100px;
}
可快速验证：console.log(document.querySelector('.container').offsetHeight) 返回 0 或极小值（如 1），基本就能确认是塌陷问题。
清除浮动的几种有效方式及差异
核心目标是让父容器重新包含浮动子元素的高度。不同方法在语义、兼容性和副作用上有明显区别：
立即学习“前端免费学习笔记（深入）”；
-
::after伪元素 +clear: both：现代推荐方案，不影响 HTML 结构，兼容到 IE8+ -
overflow: hidden或overflow: auto：简单粗暴，但可能意外裁剪子元素的position: absolute内容或遮盖阴影 -
display: flow-root：最干净的方案，专为此类场景设计，IE 不支持，Chrome 58+ / Firefox 57+ 支持
例如用伪元素修复：
.container::after {
content: '';
display: table;
clear: both;
}
为什么有时候加了 clear: both 还不行
关键点在于 clear 必须作用在浮动元素之后的块级元素上，且该元素需参与父容器的高度计算。常见错误包括：
- 把
clear: both加在浮动子元素自身上（无效，clear 是控制“避开上方浮动”，不是撑高父级） - 用
但该div被设了height: 0或overflow: hidden - 父容器本身是
inline或inline-block显示类型，不触发 BFC，overflow属性无效
真正起作用的是让父容器建立一个新的块级格式化上下文（BFC），而不仅仅是加一行 clear。
父级高度塌陷本质是 CSS 渲染机制决定的，不是 bug；但容易被误认为“边框丢失”，实际只要理解浮动如何影响包含块，就能快速定位——重点永远是检查父容器的 computed height 是否合理。
