0

私はこの単純なHTMLを持っています:

<body>          
    <div class="square" id="black"></div>
    <div class="square" id="yellow"></div>           
</body>

これはCSSです：

.square {
    height: 50px;
    width: 50px;    
}

#black {
    background-color: black;            
    float:left;   
}

#yellow {
    background-color: yellow;          
}

私が学んだことから、要素がフロートされると、ページ フローから取り出されます。フロート要素と非フロート要素がお互いを無視しているかのようです。したがって、黒い四角は黄色の上に置かれ、それを隠します。

ここに画像の説明を入力

しかし、代わりに黄色の四角を浮かべると:

#black {
    background-color: black;                      
}

#yellow {
    background-color: yellow; 
    float:left;          
}

我々が得る ：

ここに画像の説明を入力

この背後にあるロジックを理解しようとしています。html とフローティング メカニズムの要素の順序付けはどのように連携しますか? 誰がいつ勝つ？

4

1 に答える 1

1

実際、W3C Float Specは、この質問にかなりうまく答えています。

フロートとは、現在の行で左または右にシフトされたボックスです...フロートはフローに含まれていないため、フロートボックスの前後に作成された配置されていないブロックボックスはフロートが存在しないかのように垂直に流れます.

これは、フロートが最初の例で黄色のボックスを覆っている理由を説明しています。

2 番目の例については、#black isはコンテンツ フローにあり、 isdisplay: blockであるため、独自の行があります。 #yellowその場合は別の行にあります。

于 2013-02-14T02:34:00.957 に答える