父元素高度塌陷是浮动的原始设计行为，非bug；display: flow-root是最干净解法，IE需回退到clearfix或overflow:hidden。
父元素高度塌陷不是 bug，是浮动的原始设计行为——它本就为了图文环绕，不是用来做布局的。直接给父容器加 display: flow-root 是最干净的解法；若需兼容 IE，才退回到 .clearfix::after 或 overflow: hidden。
为什么父容器高度为 0，且背景/边框不显示
浮动元素脱离普通文档流，父容器在计算高度时完全“看不见”它们。computed styles 里能看到父容器 height: 0px，后续兄弟元素会上移，margin-top 也可能失效。
- 这不是渲染错误，而是 CSS 规范定义的行为：float 元素只影响行内布局上下文，不参与块级高度计算
-
clear: both加在浮动子元素自身上无效——它只让那个元素避开前面的浮动，不改变父容器是否“感知”高度 - 必须让父容器自己建立新的布局上下文（BFC），才能重新包含浮动子元素
.clearfix::after 必须写对位置和写法
伪元素清除法有效，但错一个细节就白写。
- 类名必须加在浮动子元素的直接父容器上，加在祖父级或 body 上完全不生效
-
content: ""缺失 → 伪元素不生成 → 清除动作不存在 -
display必须显式设为table或block；默认inline下clear不起作用 - IE8 只认单冒号：
:after，要兼容就得写两遍：.clearfix:after, .clearfix::after - 不要漏掉
zoom: 1（IE6/7 兼容触发 hasLayout）
overflow: hidden 能用，但副作用很实在
它靠触发 BFC 撑开父容器，但代价是裁剪所有溢出内容。
立即学习“前端免费学习笔记（深入）”；
- 下拉菜单、tooltip、绝对定位弹层、阴影外延、横向滚动区域，全会被意外截断
-
overflow: auto在 Safari 中可能无故出现滚动条 - 语义错位：你本意是“包裹浮动”，却写了“隐藏溢出”，后期维护容易误解
- 如果父容器本身有
transform或will-change，可能引发层叠上下文冲突，导致清除失效
现代项目优先用 display: flow-root
这是专为解决这类问题引入的值，2018 年起进入主流浏览器，语义准确、无副作用。
-
display: flow-root明确创建 BFC，且不干扰溢出行为 - Chrome 64+ / Firefox 62+ / Edge 79+ 均支持；Safari 15.4+ 开始完整支持
- IE 完全不支持，可用
@supports回退：.parent { display: flow-root; }@supports not (display: flow-root) { .parent { overflow: hidden; } } - 注意：若父容器已设
display: flex或display: grid，浮动本身已被忽略，此时加flow-root或clearfix都无意义
真正容易被忽略的是：浮动布局的责任边界非常窄——只要新增一个浮动子元素，就必须检查它的直接父容器是否已应用清除机制。这个检查点不会自动传递，也不能靠祖先兜底。
