父元素 border 不包裹子元素是因为浮动导致高度塌陷，根本原因是父容器 height 计算为 0px；display: flow-root 是现代首选修复方式，需作用于浮动子元素的直接父容器。
父元素 border 看起来“不包裹”子元素，根本不是 border 没生效，而是父元素的 height 计算结果为 0px —— 没有高度，border 就没地方画。
float 脱离文档流导致父容器高度塌陷
浮动元素（float: left 或 float: right）会完全脱离标准文档流。父容器在布局计算阶段直接忽略它们的高度，哪怕子元素设置了 height: 200px，父容器的 computed height 仍可能是 0。
此时你看到的现象包括：
- 父元素
border只显示顶边、断开或完全不可见 -
background-color不出现 - 后续兄弟元素（如页脚）上移，叠在浮动区上方
- 用 DevTools 查看父元素的
Computed → height，大概率是0px或极小值（如1px）
display: flow-root 是现代首选修复方式
这是 CSS 专门为解决此类问题设计的值，它创建一个无副作用的 BFC（块级格式化上下文），让父容器重新包含浮动子元素，同时不干扰溢出行为。
使用方式极简：
.parent {
display: flow-root;
border: 1px solid #ccc;
}
优势明显：
- 不裁剪
position: absolute子元素、box-shadow或 tooltip - 无需伪元素、空标签，样式干净
- 兼容性已足够：Chrome 64+、Firefox 58+、Safari 15.4+（2026 年主流项目可放心用）
注意：display: flow-root 必须作用于浮动子元素的**直接父容器**；如果浮动嵌套多层，每一层需要闭合的父容器都得单独加。
::after 伪元素清除法容易漏掉三个硬性条件
经典 .clearfix::after 方案依然有效，但失效往往是因为漏掉任一关键点：
-
content: ""缺失 → 伪元素根本不生成 -
display值未设（推荐table或block）→ 无法触发 BFC -
clear: both缺失 → 无法清除两侧浮动
完整写法必须是：
.parent::after {
content: "";
display: table;
clear: both;
}
且这个规则必须加在浮动子元素的**直接父容器**上——加错层级（比如套了 wrapper）、加到子元素自身、或父容器是 inline 显示类型，都会失效。
overflow: hidden 虽快但风险明确
给父容器加 overflow: hidden 确实能立刻撑高，原理是触发 BFC。但它不是语义性修复，只是借用了 BFC 的副产品。
副作用真实存在：
- 任何真实溢出的内容（如下拉菜单、横向滚动卡片、
transform动画超出部分）会被直接裁剪，不可见也不可交互 -
overflow: auto稍好，但旧版 Safari 可能在无滚动需求时仍显示空滚动条 - 它对
position: absolute子元素的定位参考系无影响，但裁剪行为不可逆
所以别把它当默认解法，只在明确需要同时控制溢出 + 解决塌陷时才用（例如轮播图外层容器）。
最容易被忽略的一点：所有这些方案都只对浮动子元素的**直接父容器**起作用；如果你在嵌套结构里看到某一层 border 还是不包裹，先检查那一层是否漏加了 display: flow-root 或伪元素清除规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
