父元素 border 不显示是因浮动导致高度塌陷；overflow: hidden 通过触发 BFC 解决，兼容性好；display: flow-root 是现代标准方案，语义清晰且无裁剪风险；伪元素清除需满足 content、display、clear 三条件。
父元素 border 不显示是因为高度塌陷
浮动元素脱离文档流，导致父级容器无法感知子元素高度，计算出的高度为 0。此时即使设置了 border，也会“画”在一条看不见的线上——因为没有高度，border 就没地方显示。
用 overflow: hidden 最快解决
这是兼容性好、代码少、无副作用的首选方案。原理是触发父元素 BFC（块级格式化上下文），让其重新包含浮动子元素。
- 只对父元素设置，不改 HTML 结构
- 适用于大多数场景，包括 IE8+
- 注意：如果父元素内有
position: absolute子元素且超出父容器，可能被裁剪
.parent {
border: 1px solid #333;
overflow: hidden; /* 关键 */
}更现代的写法是 display: flow-root
这是专为清除浮动设计的 CSS 值，语义清晰，不影响布局逻辑，且不会意外裁剪内容。
- Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+ 支持
- 不触发滚动条，也不影响绝对定位子元素的溢出表现
- 如果需要支持老浏览器，需加
overflow: hidden回退
.parent {
border: 1px solid #333;
display: flow-root;
}避免用伪元素清除却忘了设置 height 或 content
很多人复制 ::after 清除代码但漏掉关键属性，导致无效。必须同时满足三个条件：
立即学习“前端免费学习笔记（深入）”；
-
content不能为空字符串（常用" "或""） - 必须设为
display: table或block - 父元素不能是
display: inline或inline-block
.parent::after {
content: " ";
display: table;
clear: both;
}这个方法可靠，但比 flow-root 多几行代码，也比 overflow: hidden 稍重一点。
真正容易被忽略的是：清除浮动不是目的，让父容器正确撑开高度才是。选哪种方式，取决于你是否要支持 IE、有没有绝对定位溢出需求、以及团队对现代 CSS 的接受度。
