父元素 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 清除代码但漏掉关键属性，导致无效。必须同时满足三个条件：

Knowledge Graph - Csv Graph Loader Generator

从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。

下载

立即学习“前端免费学习笔记（深入）”；

• content 不能为空字符串（常用 " " 或 ""）
• 必须设为 display: table 或 block
• 父元素不能是 display: inline 或 inline-block

.parent::after {
  content: " ";
  display: table;
  clear: both;
}

这个方法可靠，但比 flow-root 多几行代码，也比 overflow: hidden 稍重一点。

真正容易被忽略的是：清除浮动不是目的，让父容器正确撑开高度才是。选哪种方式，取决于你是否要支持 IE、有没有绝对定位溢出需求、以及团队对现代 CSS 的接受度。