css-float - 左にフロートしたブロック要素が、彼の前の兄弟ブロック要素の左側にフロートできない理由

Question

floatスタイルが残っているブロック要素の前にインライン要素がある場合。ブロック要素は、インライン要素の左側に水平に浮きます。

floatスタイルが残っているブロック要素の前にブロック要素がある場合。フロートされたブロック要素は、最初のブロック要素の背後に垂直に配置されます。

フロートされたブロック要素が最初のブロック要素の左側に水平にフロートできないのはなぜですか？css仕様にこの動作に従うようにブラウザに要求するルールはありますか？ありがとう！

英語が下手でごめんなさい。

Answer 1

ブロックレベル要素とインライン要素は、それらの周りのフロート要素に対して異なる反応を示します。インライン要素は、フロートされた要素をラップします。たとえば、Wordの画像の周りのテキストです。

ブロックレベルの要素はスペースを占有するため、ブロックレベルの要素の後のフロート要素は、前の要素が終了した時点でフローティングを開始します。

要素の周囲に境界線を使用すると、何が起こっているかを確認するのに役立ちます：http: //jsfiddle.net/B9FVg/

HTML

<span>I am inline!</span>
<div class="floating">I'm floating left</div>

<div>I am block!</div>
<div class="floating">I'm floating left</div>

CSS

div{
    padding:20px;
    border:1px solid #000;
}

.floating{
    float:left;
}