浮动元素让inline-box基线对齐失效，因其脱离行内格式化上下文（ifc），不参与line-box构建，故无基线可言；vertical-align对其无效，应改用inline-block或flex布局。
浮动元素为什么会让inline-box基线对齐失效
因为浮动后，元素彻底脱离了行内格式化上下文（IFC），不再参与line-box的构建，自然也就没有基线可言。浏览器在排版时，会把浮动元素当作“旁观者”处理——它还在文档流里占位（影响后续块级布局），但对当前行内的文字、图片等inline-box完全不响应基线对齐逻辑。
- 典型现象：
<img>加了float: left后，旁边文字突然上移或下坠，和没浮动时的对齐位置完全不同 - 本质原因：浮动触发了BFC（块级格式化上下文）隔离，而基线对齐只发生在IFC中；一旦元素浮动，它就从IFC中“退群”了
- 注意：
vertical-align对浮动元素无效——不是它没生效，而是根本没机会被应用
用display: inline-block替代浮动来保基线对齐
如果目标是让图文并排且保持基线对齐（比如图标+文字按钮），display: inline-block是更干净的选择。它仍属于IFC，能响应vertical-align，也避免了清除浮动的麻烦。
- 关键点：
inline-block元素默认按vertical-align: baseline对齐，和文本天然协调 - 常见坑：HTML中换行或空格会产生空白符节点，导致意外间隙；解决方式要么删空格，要么设父容器
font-size: 0再重置子元素字号 - 兼容性：IE8+完全支持，比
flex更稳妥（尤其要兼容老系统时） - 示例：
<span style="display:inline-block; vertical-align:middle">✅</span><span>完成</span>，两个span能稳定居中对齐
浮动后想手动模拟基线对齐？别硬刚，换思路
试图用margin-top或transform: translateY()去“凑”出浮动元素和文字的视觉基线对齐，基本是徒劳。不同字体、字号、行高下，偏移量毫无规律，维护成本极高。
- 真实场景中，只要出现“浮动+需要对齐文字”的需求，95%的情况说明布局模型选错了
- 优先检查是否可用
flex：父容器display: flex; align-items: center，既简洁又稳定 - 若必须用浮动（如老项目无法重构），就把对齐责任交给文字容器——给文字外层包个
div，设overflow: hidden触发BFC，再用padding或line-height微调，别碰浮动元素本身
现代开发中，浮动还该用吗
纯布局场景下，浮动已基本退出历史舞台。CSS Grid 和 Flexbox 能更精准、可预测地控制对齐与流式行为，且不破坏文档流语义。
- 浮动真正合理的使用场景只剩一个：
text-wrap: wrap（文字环绕图片），且仅限于float: left/right+clear组合 - 所有用浮动做导航栏、栅格、卡片排列的写法，现在都应视为技术债
- 最容易被忽略的一点：浮动元素的
margin-collapse行为和普通块元素不同，调试时容易误判间距来源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
