私はブラウザの動作を完全に理解しようとしていますが、現時点では具体的に浮かんでいます。
次の簡単なコードでは、divがテキストの左側に浮かぶと思います。
<span>Some span (inline) text</span>
<div class='a'>Floated div</div>
次のCSSを使用します。
div.a {
background-color: red;
width:100px;
float:left;
}
ほとんどのブラウザでは期待どおりに動作しますが、IE7では、スパンテキストが1行に表示され、フロートdivが次の行に表示されます。次のjsfiddleを参照してください。http://jsfiddle.net/FtYYZ/
誰かがブラウザのレイアウトに関して何が起こっているのか説明してもらえますか?私の理解では、「浮いた要素は通常の流れから取り出され、左または右に配置されます」。最初の行の終わりから通常のフローを取得するものは何もないと思っていたので、ほとんどのブラウザーと同様に、フロートはその行に留まる必要があります。IEの動作の背後にあるロジックは何ですか?
ご協力いただきありがとうございます!