为什么内联div的行为与跨度不同？

Question

给出以下两个HTML标记块:

<div style="overflow:auto; line-height:22px;">
  <div style="float:left; display:inline;">Write</div>
  <div style="float:left; display:inline; font-size:20px;">on the</div>
  <div style="float:left; display:inline; font-size:20px;">same line</div>
</div>

<div style="line-height:22px;">
  <span>Write</span>
  <span style="font-size:20px;">on the</span>
  <span style="font-size:20px;">same line</span>
</div>

为什么他们以不同的方式展示同一件事？span是一个内联元素,但文本"Write"与"on"和"same line"垂直对齐,而不管div显示为inline.它不应该以完全相同的方式呈现线条吗？

Answer 1

你的div是浮动的.如果他们漂浮,他们不能内联.

如果删除浮点数(以及随后的overflow: auto父浮点数,因为没有必要),那么它们的行为就像内联元素:

<div style="line-height:22px;">
  <div style="display:inline;">Write</div>
  <div style="display:inline; font-size:20px;">on the</div>
  <div style="display:inline; font-size:20px;">same line</div>
</div>