高度继承异常本质是浮动导致父容器高度塌陷，使子元素的height/min-height/line-height失去作用基础；修复必须在父容器创建BFC（如display: flow-root），而非调整子元素。
直接说结论：高度继承异常不是“继承”出的问题，而是浮动导致父容器高度塌陷后，子元素的 height、min-height 或 line-height 失去作用基础——因为它们依赖的父容器高度是 0。
为什么 height / min-height 在浮动父容器里不生效？
当父容器内只有浮动子元素时，它实际渲染高度为 0。此时给子元素设 height: 200px 或 min-height: 100vh，浏览器仍会计算，但父容器没高度，“撑开”无从谈起；后续兄弟元素也会因父容器塌陷而上移，造成视觉上的“继承断层”。
- 常见错误现象：子元素明明写了
height: 100%，却显示为 0；或设置了min-height: 100vh，但整个区块在页面中缩成一条线 - 本质原因：百分比高度（
height: 100%）需父容器有**确定的高度值**（非auto），而浮动塌陷让父容器高度保持auto且内部无非浮动内容支撑 - 不要试图在子元素上加
clear: both来“修复高度”，它只影响定位，不提供高度上下文
display: flow-root 是最干净的解法
display: flow-root 是专为解决这类问题设计的现代 CSS 属性，它强制创建一个 BFC，使父容器重新包含浮动子元素，同时不改变溢出行为、不引入滚动条、不破坏语义。
- 兼容性已覆盖 Chrome 64+、Firefox 58+、Edge 79+、Safari 15.4+，2026 年绝大多数项目可直接用
- 写法极简：
.parent { display: flow-root; }，无需额外类名或伪元素 - 对比
overflow: auto：后者在内容刚好满屏时可能意外触发横向滚动条；flow-root完全规避该风险 - 注意：不要和
float同时用在同一个元素上，float会覆盖flow-root的布局行为
clearfix 伪元素法要注意 display 值
如果必须支持 IE11 或老版本 Safari，用 ::after 清除浮动仍是可靠选择，但关键细节常被忽略：只有 display: table（或 table-cell）能真正撑开父容器高度，display: block 不行。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
.clearfix::after { content: ""; display: table; clear: both; } - 错误写法：
display: block—— 它能清除浮动，但不会参与高度计算，父容器依然塌陷 - 若父容器本身有
font-size: 0（常见于 inline-block 布局清理），需在伪元素中重置：font-size: medium，否则display: table在旧版浏览器中可能渲染为高度 0 - 遇到 transform/filter/will-change 等属性时，伪元素清除可能失效——这些会创建新层叠上下文，临时去掉验证是否为此原因
line-height 异常其实是塌陷的连带症状
浮动容器内文本的 line-height 本身仍起作用，但你看到“文字没居中”“行距错乱”，往往是因为父容器高度为 0，导致 line-height 缺乏对齐基准；一旦清除浮动，line-height 表现立刻恢复正常。
- 别在浮动父容器上盲目调大
line-height试图“撑高”，这是治标不治本 - 若需垂直居中，优先用
display: flex; align-items: center替代float + line-height组合 - 清除浮动后，检查父容器是否设置了
height或min-height；若没设，line-height可能导致子元素间出现不可预期的空白
真正容易被忽略的是：高度继承异常从来不是孤立问题，它永远伴随着浮动塌陷存在。修复动作必须落在父容器上，而不是在子元素里加各种 hack。先确认父容器是否已触发 BFC（flow-root 或 clearfix），再谈子元素的尺寸控制——顺序错了，所有调整都是徒劳。
