浮动元素之间为什么会有奇怪的垂直间隙
这不是 line-height 搞的鬼，而是浮动元素脱离文档流后，其父容器高度塌陷，导致后续内容（或兄弟浮动元素）的基线对齐行为被原始文本流残留影响。常见现象是两个 float: left 的 div 并排时，底部不齐、中间多出几像素空隙。
- 真正起作用的是浮动元素的
vertical-align默认值（baseline），而 baseline 会参考父容器里「假想的文本行」，哪怕没文字 -
line-height只有在浮动元素内部有行内内容（比如文字、span）且未显式设置vertical-align时，才间接影响对齐位置 - 用
margin-bottom硬调间隙看似有效，但容易在响应式或不同字体下失效，属于治标不治本
清除浮动才是控制垂直关系的前提
不解决父容器塌陷，任何 margin 或 line-height 调整都是在和幽灵行高搏斗。现代写法首选 display: flow-root，兼容性够用（Chrome 64+/Firefox 58+/Safari 10.1+）；老项目可用 ::after 伪元素清除。
-
display: flow-root让容器生成 BFC，自动包含浮动子元素，高度不再塌陷 → 垂直间隙失去“浮动上下文”基础 - 避免用
overflow: hidden清除，它可能意外裁剪position: absolute子元素或阴影 - 如果必须支持 IE，用
.clearfix::after { content: ""; display: table; clear: both; }，别漏掉display: table，否则clear无效
浮动元素自身对齐用 vertical-align 更直接
当多个浮动元素并排（如图标 + 文字块），需要它们顶部/底部对齐时，vertical-align 比调 margin-top 可靠得多——它作用于浮动元素的“行框”，且不受父容器 line-height 干扰。
- 给浮动元素加
vertical-align: top（或middle、bottom），立刻对齐，无需计算像素 -
vertical-align对float元素生效的前提是：该元素是「行内级」（inline-level），所以div需配合display: inline-block或保持默认display: block但被包裹在行内上下文中（较少见） - 更稳妥的做法：把浮动换成
display: inline-block+vertical-align，彻底避开 float 的对齐陷阱
line-height 在浮动中真正有用的场景
只有一种情况 line-height 是关键：浮动元素内部包含单行文本，且你需要精确控制文本在其框内的垂直居中。此时 line-height 与容器 height 相等即可居中，和浮动本身无关。
立即学习“前端免费学习笔记（深入）”；
- 例如：
div { float: left; height: 40px; line-height: 40px; }→ 文字垂直居中 - 若容器高度不固定，
line-height就不可靠，应改用 Flex（display: flex; align-items: center） - 千万别给父容器设
line-height试图调整浮动间隙——它不会传递给已脱离流的子元素
浮动的垂直间隙本质是文档流断裂后的视觉副作用，不是样式参数没调对。盯住清除浮动和对齐方式这两个点，比反复试 margin 和 line-height 省事得多。现在还用 float 布局的场景越来越少，但维护老代码时，这点最容易被当成“小问题”拖到最后才查。
