为何将元素属性改为float:left时相邻inline元素会发生偏移？

这个现象是三种CSS布局规则的差异共同导致的：

• 对齐规则不同：display: inline-block 属于行内级元素，默认和相邻行内内容按照基线对齐，也就是元素底部会和文本中字母x的下边缘对齐，元素下方会自动预留出容纳p、q这类字母下半部分的空隙。而float: left元素是脱离普通文档流的，不存在基线对齐约束，会直接靠向父容器的左侧顶部排布，不会预留基线空隙，两个模式下元素的相对位置本身就有微小差异。
• 空白字符解析规则不同：inline-block元素和相邻元素之间如果有换行、空格，浏览器会把这类源码里的空白符解析成一个半角空格，占据一定宽度。而浮动元素不会触发这个规则，和相邻元素之间的空白符会被直接忽略，这就导致旁边的行内文本起始位置会少一个空格的偏移量。
• 行框计算规则不同：inline-block元素会参与所在行的行高计算，会把整行的行框撑高，行内文本的排版位置会随行框同步调整。而浮动元素不参与普通行框的高度计算，仅会挤压行内文本的可用排版空间，不会改变当前行的行高，两种布局模式下的文本排版基准不同，自然会出现肉眼可见的轻微位移。

你给出的示例代码里可以直接验证这一点：把红色div的float:left改成display:inline-block后，两个div之间会多出来一个明显的空格间隙，同时红色div的位置会比浮动状态稍微靠下，旁边的绿色文本自然就会出现偏移。

内容的提问来源于stack exchange，提问作者Mysa Mysa