CSS高度陥没

高度陥没問題

ドキュメント・フローでは、親要素の高さのデフォルトは、子要素の高さ、親要素の高さです.ただし、サブエレメントがフローティングを設定すると、サブエレメントはドキュメントフローから完全に離れ、サブエレメントが親エレメントの高さを支えることができなくなり、親エレメントの高さが陥没します.

高度な陥没の解決

方法

W 3 Cの規格によると、ページの要素に隠されている属性はBlock Formatting Context(ブロックのフォーマット環境)と呼ばれ、BFCと略称され、この属性は開くか閉じるかを設定することができ、デフォルトは閉じる
要素のBFCをオンにすると、要素には次のような特性があります.
1.親要素の垂直外側の距離が子要素と重複しない2.BFCをオンにする要素はフローティング要素に上書きされない.BFCをオンにした要素はフローティングサブ要素を含むことができる
要素のBFCをオンにする方法
1.エレメントフローティングの設定

はこの方式で開く、親要素を広げることができるが、親要素の幅が失われ、この方式でも下の要素が上に移動する、問題を解決できない.要素の絶対位置を設定3.要素をinline-block

に設定

は問題を解決することができるが、幅が失われるため、この方法は推奨されない.要素のoverflowを非visibleの値推奨方式に設定:overflowをhiddenが副作用が最も小さいオープンBFCに設定方式

.

方法2
高度に陥没した親要素の最後に、空白のdivを直接追加することができます.このdivは浮動していないので、親要素の高さを支えてから浮動をクリアすることができます.このように、この空白のdivで親要素の高さを支えることができます.この方法では、問題を解決することができますが、副作用はほとんどありません.ページに余分な構造が追加されます

方法3
after擬似クラスを介して要素の最後に空白のブロック要素を追加し、フローティングをクリアすることで、divを追加する原理と同様に、同じ効果を達成することができ、ページに余分なdivを追加することはありません.これは私たちが最も推奨している方法であり、副作用はほとんどありません.