float~_html/css_WEB-ITnose に関する小さな問題

<div style="background:red; width:100px; height:100px; "></div><div style="background:green; width:100px; height:100px; float:left;"></div>

効果:


質問:
2 番目の div が左に浮いていると思いますが、最初の div をカバーする必要がありますか?ドキュメントフローから切り離されているのに、なぜまだ最初の div の下にあるのでしょうか?

ありがとうございます！

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

絶対位置を設定する: 絶対;

絶対位置を設定する: 絶対
私はこれを知っています。私が尋ねているのは、なぜこのフロートが上がらないのかということです

誰が答えてくれますか？ ?

フローティングはドキュメント フローから切り離されません
どこで見ましたか?
それ以外の場合は、フローティングまたは配置を設定します
最初の div は次のとおりです。フローティングでも位置決めでもないので、2番目のdivはフローティングでも位置決めでもありません。 フローティングdivは自然に下に流れます

ドキュメントフローから分離すると絶対配置または固定配置になります

floatは元々カバーしません

の定義についてフローティング、参照してください
http://www.w3school.com.cn/css/css_positioning_floating .asp

Upstairs??++++

最初のものもフローティングにする必要があります

div はブロックレベルです最初の div を float に設定していないため、行全体を占有します。 2 番目の div はフローティングですが、最初の div のスペースを占有しません。この二つを逆に書くと重なってしまいます。

最初の div は行を占有するため、2 番目の div のフローティングは 2 番目の行から開始することと同じであり、2 つの div の位置を入れ替えて 2 番目の div を配置できます。原則として、最初の div はフローティングであるため、ドキュメント フローの外にあり、2 番目の div が最初の位置に表示され、最初の div がフローティングして最初の div を覆います。 . これは div の外観です

最初の div は 1 行を占有するため、2 番目の div は 2 番目の行から浮動します。上記の効果が必要な場合は、2 つの div の位置を相互に変更できます。 2 番目の div が最初に配置された場合、その原則は上書きされます。最初の div はフローティングであるため、ドキュメント フローから外れ、2 番目の div が最初の位置に表示され、その後、最初の div がフローティングされます。 2 番目の div をカバーするとこんな感じです
タイプミスですみません

皆さん、ご回答ありがとうございました!

3ea33e8aad1ce87153c1c03e6146cd5d

これにより、前述の効果が得られます。 。 。 。 。