div3 が定義した緑色を表示しないのはなぜですか??
<div style="width:100px;height:100px;background-color:#ffff00;float:left">
div1
</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left">
div2
</div>
<div style="width:100px;height:100px;background-color:#00ff33">
div3
</div>
なぜこうなった ？しかし、属性 float="left" を適用すると緑色が表示され、float="right" を適用すると機能しますが、div3 に float 属性がない場合、緑色が表示されないのはなぜですか?
フローティング要素は通常のフローから取り出されるため(完全に配置された要素とは異なります)、HTML の 3 番目の div は実際には最初の 2 つのフローティング div の後ろにありますが、ライン ボックス ( div3) はライン ボックスとしてそれらの下にあります。 float が尊重する唯一の要素です。ライン ボックスは、インライン フォーマット コンテキストに属する要素です。
2.1仕様から
フロートは流れの中にないため、フロート ボックスの前後に作成された配置されていないブロック ボックスは、あたかもフロートが存在しないかのように垂直方向に流れます。ただし、フロートの横に作成された現在および後続の行ボックスは、必要に応じて短縮され、フロートのマージン ボックス用のスペースが確保されます。
div1 と div2 の周りに余白があれば、div3 が表示されます。
<h2>Why it breaks...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;">div3</div>
<h2>How to fix it...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;overflow: auto;">div3</div>
ただし、これはoverflow: autodiv3 を使用して簡単に修正できます。
フィドルを参照してください: http://jsfiddle.net/audetwebdesign/jv7YB/
フロー内の div3 で、高さと幅が 100px に指定され、背景色が緑です。
フロートがない場合、親要素であるビューポートの左上に緑色の四角形が表示されます。緑色の四角の中では、テキスト (より正確には、テキストを含む行ボックス) が左上に配置されます。
フロートを追加すると、フロートはビュー ポートの左上から配置され、通常のインフロー コンテンツの上にペイントされます。
ただし、div3 テキストを含む行ボックスは、フロート用のスペースを作るために短縮されますが、フロートと元のテキストを含むスペースが div3 コンテナーにないため、インライン ボックスは押し下げられます。
div3 コンテナーの背景は、テキストを含む行ボックスとは別であり、期待どおりに押し下げられません。
div3 ブロックに適用overflow: autoすると、新しいブロック フォーマット コンテキストが作成され、div3 ブロックは自己完結型ユニットのように機能するため、緑の背景がコンテンツと子要素を囲みます。
参考文献
重ね順と背景色の描画方法については、http ://www.w3.org/TR/CSS2/zindex.html#painting-order を参照してください。
ブロック フォーマット コンテキストの場合: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
ブロック書式設定コンテキストがそのまま実装される理由の詳細については
、新しいブロック書式設定コンテキストを確立するために CSS2.1 が "visible" 以外のオーバーフロー値を定義するのはなぜですか?を参照してください。ボルトクロックの礼儀
これは、フロート要素がスペースを消費しないため、体の高さが十分ではなく、要素が見えなくなるためです。2 番目の div の後に多くのブレークを追加すると、div が表示されます。
緑の背景はありますが、yellowDIV の背後にあります。テキストとインライン要素は浮動要素を包み込むため、「div3」テキストは押し下げられます。
https://developer.mozilla.org/en-US/docs/Web/CSS/float
CSS の float プロパティは、通常のフローから要素を取得し、そのコンテナーの左側または右側に沿って配置する必要があることを指定します。このコンテナーでは、テキストとインライン要素が周囲を囲みます。浮動要素とは、float の計算値が none でない要素です。