CSS レイアウト フロート問題_html/css_WEB-ITnose

div css float

3 つの div、最初の 2 つは float:left に設定され、最後のものは float 属性を設定しません。
3 番目の div のフレームが最初の div をカバーしているのに、3 番目の div のコンテンツが最初の div をカバーしていないという表示効果が発生するのはなぜですか?

<style>  div { width:100px; height:100px;border:1px solid black;}  #first, #second { float:left; }  #third  {border:4px solid red;}</style><div id='first'> first</div><div id='second'> second</div><div id='third'> third</div>

ディスカッションへの返信 (解決策)

キー 違うことを望みますか?
表示された結果がそのまま得られます

div のデフォルトの背景は透明です。2 つの振幅に背景を追加していないため、フローティング div の下に #3 番目の div が表示されます。
背景を付ければ分かります

#first, #second { float:left; background:#aaa;}

ドキュメントフローから外れているので、通常の順序からも外れています

1 番目と 2 番目は両方ともフローティングですが、3 番目はフローティングではありませんが、1 番目と 2 番目が 3 番目のコンテンツを表示するスペースを占有します。3 番目の幅を 200 より大きい数値に設定するか、高さをより大きい数値に設定してみてください。 100

より