浮动子元素导致父容器边框“消失”实为高度塌陷，因浮动元素脱离文档流，父容器未将其计入高度；触发BFC（如overflow:hidden、display:flow-root）可修复，但需排除height限制、外边距合并等其他因素。
为什么浮动子元素会让父容器边框“消失”
这不是边框真的没了，而是父容器高度塌陷了——它没把浮动的子元素算进自身高度里，所以 border 只画在了 0 高度的区域上，视觉上就像失效了一样。根本原因是：浮动元素脱离了普通文档流，父容器在计算高度时直接“忽略”了它们。
触发BFC是最直接有效的修复方式
BFC（Block Formatting Context）会强制容器包含内部浮动元素的高度。只要让父容器成为BFC，它就能正确包裹子元素，border 自然就显示完整了。常用且兼容性好的方法有：
-
overflow: hidden（最常用，但注意会裁剪溢出内容） -
overflow: auto（比 hidden 更安全，滚动条仅在需要时出现） -
display: flow-root（现代标准写法，语义清晰，无副作用，Chrome 64+/Firefox 58+ 支持） -
float: left或position: absolute（不推荐，会改变父容器自身定位行为）
别用 clearfix 了，除非要兼容 IE8
传统 .clearfix 通过伪元素清除浮动，确实能撑开高度，但它本质是“hack”，不是 BFC。现在主流项目已无需支持 IE8，display: flow-root 更干净、可维护性更高。如果必须兼容旧浏览器，才考虑：
.parent {
display: flow-root; /* 现代浏览器 */
}
.parent {
*zoom: 1; /* IE7/8 触发 hasLayout */
}
.parent::after {
content: "";
display: table;
clear: both;
}border 失效还可能是其他原因
别一上来就归咎于浮动。先检查这几个点：
立即学习“前端免费学习笔记（深入）”；
- 父容器是否设置了
height或max-height固定值？会压制 BFC 的高度计算 - 子元素是否用了
margin-top导致外边距合并，让第一个子元素“浮出”父容器顶部 - 是否误用了
visibility: hidden或opacity: 0，让子元素不可见但依然占位？这时 BFC 生效，但你看不到内容，误以为边框异常 - 父容器本身有
border，但颜色和背景太接近，实际画出来了只是看不清
BFC 不是万能开关，它只解决“高度塌陷”这个具体问题；而 border 显示与否，还依赖于高度是否真实存在、是否被遮挡、是否可见。盯着 getComputedStyle 里的 height 和 borderTopWidth 值，比猜更可靠。
