用flex布局替代float实现图标与文本垂直居中，设父容器display: flex和align-items: center；若必须兼容旧浏览器，则微调margin-top或统一图标尺寸为1em并配vertical-align。
float图标导致文本基线错位怎么办
浮动元素会脱离文档流，文本的行框（line box）会绕开它，但默认对齐方式是baseline，图标往往比文字矮，结果就是文字“吊”在图标下方，看着像没对齐。
- 别用
vertical-align: middle硬调——它只对行内/表格单元生效，对float元素无效 - 真正起作用的是让图标和文字共处一个flex容器：把父容器设为
display: flex，再用align-items: center - 如果必须保留
float（比如老项目兼容IE8），可给图标加margin-top: -0.25em微调，但这个值依赖字体大小，换font-size就得重算
flex居中时图标尺寸不一致怎么统一
SVG、字体图标、PNG混用时，height/width设成固定值容易拉伸或裁剪；用em又受父级字号影响，导致同一套CSS在不同上下文里表现不一。
- 优先用
height: 1em; width: 1em;，再配vertical-align: -0.125em（适配多数图标基线） - SVG图标记得加
viewBox并移除width/height属性，让它随font-size等比缩放 - 避免对图标直接设
font-size——它只影响字体图标，对<img>或<svg></svg>无效
float + flex混用引发布局塌陷
旧代码里写了float: left，新需求又加了display: flex，结果父容器高度变成0，内容溢出——这是float和flex在同一个容器里打架的典型症状。
- 绝对不要在一个元素上同时写
float和display: flex，浏览器会忽略float，但部分IE可能行为异常 - 如果父容器原本靠
float清除来撑高，换成display: flex后需显式设置min-height或用::after伪元素清除（仅当无法改结构时） - 检查是否有
overflow: hidden残留——它曾用于BFC清除浮动，但在flex容器里反而可能截断子元素
移动端图标与文字间距忽大忽小
在iOS Safari或某些安卓WebView里，图标和文字之间空隙不稳定，有时贴住，有时隔开一像素，尤其缩放页面后更明显。
- 根本原因是
line-height计算精度问题，文字行高会因字体渲染微调而浮动 - 给父容器加
line-height: 1，再单独给文字设line-height: 1.5，切断图标所在行框的继承干扰 - 避免用
margin-right给图标加间隙——响应式断点切换时容易失衡；改用gap: 0.5em（flex容器）或padding-inline-end（更现代）
最麻烦的其实是图标来源混杂：有的来自CDN字体，有的是内联SVG，有的是base64图片——它们的盒模型、默认对齐、缩放行为全都不一样，得一个个抠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
