css float_html/css_WEB-ITnose

プロジェクトの実践中にこんな問題に遭遇しました

<div class="main">        <p>aaaa</p>        <p>bbbb</p>    </div>

* {　　padding: 0;　　margin:0;}p {　　padding-left: 30px;}.main {	background: green;}

上記の効果はこんな感じです

親要素div内の2つのp要素を同じ行にフロートさせたい

この文を追加しました

りりー

結果はこうなるだろうと考えるべきでした

結果はこんな感じです

この問題をよりよく説明するために、私はただ言いました 混乱したとき、私はページの親 div の下に div を追加しました

.mian p {            float:right;        }

つまり、一般的にこのようなレイアウトを実現したかったのです

その結果、このような効果を実現するために上記の CSS を使用しました

実際にこの問題が発生したのは、上の親 div が背景色を設定していないためです。要素を調べたところ、div の高さが 0 になっていることがわかりました。また、なぜ下の div が圧縮されていて 2 である必要があるのか​​もよくわかりません。 . div はブロックレベルの要素であり、上向きにフロートしません

親要素の高さを設定せず、親要素にフローティング要素のみが含まれている場合、折りたたみの問題が発生することがわかりました。この問題は親要素です 要素の高さが0になります

情報を探して学習した結果、

親要素にoverflow:hiddenを設定することができます

この場合、親要素は自動的に含めるように展開されますその中のフローティング要素とその下の div も自動的に一番下に移動します

実際、単純なクリア設定を通じてフロート設定を削除できれば

clear: Both 両側のフロートをクリアします

clear : right は右側の float をクリアします

clear: left は左側の Float をクリアします

たとえば、上記の質問の場合、以下の div を設定できます。つまり、float 要素がクリアに設定されていません: 両方、浮かないようにするため

上記では、上の div にオーバーフローを設定しませんでした: hidden 次の div をクリアするだけです: Both

別の方法は、非表示のコンテンツをCSS疑似クラスを介してその最上部: フローティング要素をクリアした後: 両方

上で黒で強調表示されているものは、フロートをクリアする 2 つの方法です

も私の問題を解決して共有します