この記事の内容は、CSSにおける親要素の高さ崩れの意味と解決方法についてです。 、特定の参考値があり、困っている友人がそれを参照できます。お役に立てば幸いです。
<p class="box1"> <p class="box2"></p> </p>
<style type="text/css"> .box1{ border: 10px red solid; } .box2{ background-color: yellow; width: 100px; height: 100px; float: left; } </style>
clear:both
を使用するだけです。 HTML と CSS コードは次のとおりです: clear:both
即可, HTML & CSS 代码如下:<p class="fl">我是左浮动元素</p> <p class="fr">我是右浮动元素</p> <p class="cb">我不受浮动元素的影响</p>
.fl { float: left; } .fr { float: right; } .cb { clear: both; }
clear: both
<p>clear:both
clear:both
,所以该元素就能不受浮动元素影响出现在父元素的最底部,而父元素计算高度的时候需要考虑到这个正常元素的位置,所以高度自然包裹到了最底部,也就没有了坍塌。<p>对于这个方法,以前我们是利用新增一个空元素(<b>
或 <span>
或 <p>
等)来实现的,如下:<p class="container"> <p class="box"></p> <span class="clear-box"></span> </p>
.box { float: left; } .clear-box { clear: both; }
<p class="container clearfix"> <p class="box"></p> </p>
.clearfix::after { content:""; display:table; clear: both; }
clearfix
类名,该类使用 ::after
伪元素类选择器增加一个内容为空的结构来清除浮动,可能你们比较疑惑的是为什么要设置 display:table
<p class="container"> <p class="box"></p> </p>
.container { overflow: hidden; } .box { float: left; }
clear:both
に設定します<p>clear:both
clear:both
を使用しているため、この要素はフローティング要素の影響を受けることなく表示できます。は親要素の下部にあり、親要素の高さを計算するときにこの通常の要素の位置を考慮する必要があるため、高さは自然に下部に回り込み、崩れることはありません。 <p>このメソッドでは、空の要素 (<b>
または <span>
または <p>
など) を追加していました。 .)、次のように: rrreeerrreee🎜 このメソッドはより直感的ですが、無駄な空白のラベルが追加されるため、あまり洗練されていません。これは冗長で、後のメンテナンスに不便です (通常、このメソッドの使用は推奨されません)。その後、親要素の擬似要素 (::after) を介して実装された有名な clearfix メソッドが登場しました。コードは次のとおりです: 🎜rrreeerrreee🎜上記のメソッドは、親要素に clearfix
クラス名。このクラスは、フロートをクリアするために空のコンテンツを含む構造体を追加するために ::after
疑似要素クラス セレクターを使用します。なぜ display:table code> 属性を設定する必要があるのかについてはさらに混乱していますが、これには実際には比較的複雑な進化プロセスが含まれています。詳細については、リファレンスを参照してください - Clearfix Floating Evolution History🎜🎜新しい BFC🎜🎜このメソッドの特徴は次のとおりです。親要素が新しい BFC を作成するときに、その高さが計算されます。フローティング子要素をラップします。 🎜🎜 証拠として例を使用してみましょう: 以下に示すように、画像はフローティングになっており、親要素の記事の高さは折りたたまれており (画像は含まれていません)、ルート要素の HTML (デフォルトでは、ルート要素の HTML は BFC です) ) 高さには画像の高さが含まれます。 🎜🎜🎜🎜🎜🎜🎜🎜親要素の高さが崩れる問題は新しい BFC を作成することで解決できるため、次のようにして簡単に BFC を作成できます: 🎜🎜🎜🎜ルート要素またはそれを含むその他の要素🎜🎜 🎜🎜 🎜🎜Float (要素の float は none ではありません)🎜🎜🎜
overflow: hidden
,代码如下:<p class="container"> <p class="box"></p> </p>
.container { overflow: hidden; } .box { float: left; }
以上がCSSの親要素の高さの崩れは何を意味し、それを解決するにはどうすればよいですか? (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。