floatによる親要素の崩壊問題の解決

float フローティングによって引き起こされる親要素の崩壊の解決策は次のとおりです。親要素の高さを設定し、最後の子要素の後に空の div を設定し、clear を使用して float をクリアし、親に overflow: hidden を設定します。

#Webページをレイアウトする場合、float属性を使用することが多いですが、親要素の下にある子要素をfloatにすると親要素が崩れてしまいます。 。次の記事では、フローティングによる親要素の崩壊の問題を解決する方法を詳しく紹介しますが、一定の参考効果があり、皆様のお役に立てれば幸いです。

#[おすすめコース:

CSS チュートリアル

#]親要素に背景色を設定した後要素のフローティングを子要素に設定すると、親要素の背景色が消え、親要素に境界線がある場合、フローティング要素で境界線を開けることができないことがわかります。 例: li

 <ul style="background: pink;border: 1px solid #ccc">
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  <li>PHP中文网</li>
  </ul>

には float が設定されていません。レンダリング:

float を設定した後

<ul style="background: pink;border: 1px solid #ccc">
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  <li style="float: left;list-style: none;">PHP中文网</li>
  </ul>

Rendering

上の図からわかるように、子要素が float に設定されている場合、親要素のコンテンツは引き伸ばされません。つまり、要素が float に設定されると、その要素はドキュメント フロー全体の管轄外になり、親要素に存在していた高さは float にも存在しなくなります。要素はデフォルトでコンテンツを持たない状態になり (前提条件として、親要素に固定の高さが設定されていないことを意味します。親要素自体の高さが固定されている場合、この状況は発生しません)、折りたたみが発生します

親要素が崩れる場合の解決策:

(1) 親要素に高さを追加する

この方法では高さは確認できないので、複数回設定を試みるには

<ul style="height:200px;background: pink;border: 1px solid #ccc">

(2) 最後の子要素 ​​div の後にスペースを追加し、それにスタイルクリアを追加し、両側のフロートをクリアします。

 <div style="clear:both;"></div>

(3) ) 親要素は、overflow: hidden;

 <ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">

を設定します (4) 親要素は、after 疑似クラスを追加します;

.parent:after{
content:"";
display:block;
clear:both;
}

要約: 上記がこの記事の全内容です。それは誰にとっても役立つでしょう。

以上がfloatによる親要素の崩壊問題の解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。