フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right;に設定した後、その要素の親要素に背景色がある場合、親要素の背景色が消えてしまうという状況によく遭遇します。親要素に境界線がある場合、フローティング要素は境界線を拡張できません。

上記の 2 つの図から、フローティング要素を追加した後、li 要素はルールに従って水平に配置されますが、親要素は消えていることがわかります。

親要素に 5px の境界線を追加します。li 要素がフロートされた後、境界線はコンテンツによって引き伸ばされません。

最初の例では親要素が消えているように見えますが、2 番目の例では親要素は消えていないものの、高さが 0 として計算されていることがわかります。この問題を説明するには、フローティング要素の特性に戻る必要があります。「要素がフロートに設定されると、自動的にドキュメント フローから外れます。」これは、俗語に翻訳すると、要素がフロートした後はドキュメント フロー全体の管轄下になくなるため、親要素内の以前の高さはフローティングとともに存在しなくなり、この時点で親要素にはコンテンツがないとみなされることを意味します (親要素が固定の高さに設定されていないことが前提です。親要素自体が固定の高さである場合、この状況は発生しません)。

解決：

1. 親要素にもfloatを追加します。これにより、親要素と子要素がドキュメント フローから外れ、子要素が親要素内に収まるようになります。このようにして、親要素は子要素の高さに適応できます。ただし、この方法には欠点があり、親要素の後の要素の配置に確実に影響し、レイアウトにも影響します。
2. 親要素に固定の高さを設定します。この方法は、子要素の高さがわかっていて固定されている場合に適しています。
3. ブロックレベル要素を追加し、この要素にclear:both;を設定してフロートをクリアします。この解決策はずっと前に使用されていました。新しい空の div を作成し、この div の両方に clear: を設定します。これにより、間違いなく意味のないタグが追加されます。大きなページにこのようなタグが多すぎるのはよくありません。
4. overflow：hidden； [詳細は後述]
5. 擬似クラス ::after でフロートをクリアする [詳細は後述]

オーバーフロー:非表示;

• オーバーフローを非表示にします。コンテンツが親要素を超えた場合、この属性と値を使用してオーバーフロー部分を切り取り、ページをより美しくすることができます。
• フロートを解除します。子要素がフロートしている場合は、親要素に overflow: hidden を追加します。その最初の特性によると、子要素の制限を超えた部分は切り取られる必要があります。ただし、子要素はフロートしているため、切り取ることはできません。そのため、親要素は高さを増やして子要素をラップすることしかできず、親要素に高さがあり、この高さが子要素に適応するため、フロートしている子要素が親要素に含まれます。

::after 疑似クラス

疑似クラスを使用してフロートをクリアすると、空の div を作成して clear: both; に設定するのと同じ効果がありますが、空の div 要素の代わりに疑似クラスが使用される点が異なります。

<div class="box">
    <div class="son">私はフローティング子要素です</div>
</div>

。箱 {
    幅:400ピクセル;
    背景:#F00;
}
.息子{
    フロート:左;
}
.son::after {
    コンテンツ："";
    clear:both;/*フローティングをクリア*/
    display:block;/*要素がブロックレベル要素であることを確認してください*/
}

以上で、フローティング要素によって親要素の高さが崩れる原因と解決策についての説明は終了です。親要素の高さが崩れる原因について詳しく知りたい方は、123WORDPRESS.COM の過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。