display: inline 是唯一可靠、语义清晰且兼容无风险的转换方式；float 和 position 会破坏文档流，导致父高塌陷、脱离文本流、vertical-align 失效、无法响应 text-align，无法满足并排且保正文本流的需求。
display: inline 是唯一可靠、语义清晰且浏览器兼容性无风险的转换方式。
为什么不能靠 float 或 position 代替？
有人试过给 <div> 加 <code>float: left 或 position: absolute，看起来“变行内”了，但本质是破坏文档流：前者导致父容器高度塌陷，后者完全脱离流、无法参与行内对齐；两者都不解决“让多个块级元素并排且保留正常文本流行为”的需求。
-
float后元素仍会触发 BFC，可能影响周围布局，且必须清除浮动 -
position: absolute会让元素脱离流，line-height、vertical-align失效，无法与文字对齐 - 二者都无法响应父容器的
text-align，而display: inline可以
display: inline 会丢失哪些样式？
块级元素转为 inline 后，以下 CSS 属性将失效：
-
width和height：行内元素不接受宽高设置，内容撑开即止 -
margin-top/margin-bottom：垂直外边距被忽略（但margin-left/margin-right仍有效） -
padding-top/padding-bottom：虽能渲染，但不撑开行高，可能造成文字重叠 -
vertical-align：默认值是baseline，若需调整对齐，必须显式设置
什么时候该选 inline-block 而不是 inline？
当你需要保留宽高、垂直内外边距，又希望多个元素同行排列时，display: inline-block 才是正解——它不是“伪行内”，而是真正支持块级盒模型的行内级元素。
- 常见误用：
<div> 转 <code>inline后发现按钮宽度失控、文字上下 padding 被截断 → 实际该用inline-block - 注意空白符：
inline-block元素间换行或空格会渲染为 4px 左右空白，可用font-size: 0或注释删空格解决 - 兼容性：IE8+ 完全支持，无需前缀
别被“看起来排成一行”骗了——真要控制尺寸和间距，inline 是妥协，inline-block 或现代 flex 才是稳解。最易被忽略的是：转换后 vertical-align 默认值引发的基线错位，调一次 vertical-align: top 往往比反复调 margin 更快见效。
