インライン要素に挟まれているフロートが下にずれて置かれる

症状

ソース中でインライン要素の間にある要素をフロートにしたとき、フロートが本来置かれるべき位置から下方にずれた位置に置かれる。このためフロートは、フロートの直前の行に含まれる内容の後に置かれてしまう。

例示

<div style="width:14em;">
<span style="color:red;">フロートの前にあるインライン要素です。</span>
<span style="float:left; width:5em; border:1px dashed blue;">フロート</span>
<span style="color:green;">フロートの後にあるインライン要素です。</span>
</div>

フロートの前にあるインライン要素です。フロートフロートの後にあるインライン要素です。

前景色が赤色のspan要素と、前景色が緑色のspan要素の間にあるspan要素をフロートにしています。