浮动元素确实继承父级line-height，但仅对内部文本生效；因脱离文档流、行框异常或display变化导致视觉失效，真正问题在于排版上下文丢失而非继承失败。
浮动元素能继承父级 line-height，但继承后往往“看不见效果”——不是没继承，而是继承了却因脱离文档流、行框计算异常或自身 display 类型变化而失效。
浮动元素确实继承 line-height，但只对内部文本起作用
只要浮动元素内有文本（比如 <div class="item">文字</div>），它就会继承父容器的 line-height 值，并用于渲染内部那行文字的行框高度。但问题在于：
- 浮动元素本身是块级框，
line-height不控制它的定位或容器高度 - 如果浮动元素里只有图片、空标签或
display: block子元素，line-height就完全不参与布局计算 - 浏览器开发者工具的
Computed面板里能看到line-height的继承值，但它可能被设为normal或未生效的inherit
父容器 line-height 过大导致浮动下方出现空隙
这是最常被误认为“line-height 没继承”的现象：浮动子元素下方多出一段空白，其实不是子元素的问题，而是父容器还在按 IFC（行内格式化上下文）计算最小高度。
- 父容器若设置了
line-height: 2，即使里面全是float: left的 div，也会撑高底部留白 - 用 DevTools 检查父容器的
computed line-height，看是否意外继承了 body 或全局样式 - 临时验证可加
line-height: 0到父容器——但仅限无文本场景；含文字时改用font-size: 0+ 子元素重置font-size - 更稳妥的做法是清除浮动（如
::after+clear: both），让父容器重新获得高度参考
想靠 line-height 实现垂直对齐？vertical-align 对 float 无效
vertical-align 对 float 元素完全不起作用，因为它只适用于行内级元素和表格单元格。很多开发者写 .icon { float: left; vertical-align: middle; } 是白费功夫。
立即学习“前端免费学习笔记（深入）”；
- 若需单行文字与浮动图标对齐，必须让文字所在容器有明确
height和匹配的line-height（如height: 48px; line-height: 48px;） - 浮动图片需控制尺寸和 margin（如
height: 32px; margin: 8px 12px 0 0;），避免撑开行框 - 文字必须是纯内联内容（不能包在
<div> 里），否则 <code>line-height不会作用于该行 - 现代方案优先用
display: flex替代 float，align-items: center直接解决对齐，且不依赖line-height的副作用 - 父设
line-height: 1.5; font-size: 16px→ 子元素若font-size: 14px，实际行高 =14px × 1.5 = 21px - 父设
line-height: 24px→ 子元素无论字号多少，都强制用24px行高，容易导致小字号文字挤在一起 - 避免在浮动容器上直接设
line-height: inherit，除非你确认父级计算值合理；更推荐显式声明（如line-height: 1.4;）
line-height 继承值类型决定实际表现
line-height 的继承行为很关键：无单位数值（如 1.5）会随子元素 font-size 重新计算；百分比或像素值则可能失衡。
真正容易被忽略的是：浮动布局下，line-height 的视觉影响从来不在“继承是否发生”，而在“它是否还处于有效的排版上下文中”。一旦父容器塌陷、行框丢失、基线漂移，再正确的继承值也救不了对齐和空隙问题——这时候该换布局，而不是调行高。
