フローティング親要素の高さを増やす方法

今回は、floating親要素の高さをサポートする方法と、floating親要素の高さをサポートするための注意事項を説明します。以下は実際的なケースです。

none ではない子要素に float 属性値を設定すると、親要素の高さが崩れる 2 つの状況が発生します

親要素には高さが設定されていない場合と、親要素の高さが設定されていない場合があります。今回は高さがありません。

親要素で設定された高さが不十分であるため、子要素がオーバーフローします

li 要素に高さを与えて左にフローティングすると、ul の高さは 0 になります

解決策:

有効化BFC:

これを設定します 要素のoverflow属性をvisibleを除いた属性値にします

要素のfloat属性を属性値に設定します

' ' ' ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ および要素を絶対配置absolute

に設定します 要素のdisplay属性を次のように設定します: inline-block または table-cell、flex、inline-flex

フローティングをクリア

親要素に適切な高さを追加します

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

getBoundingClientRect() を使用して div コンテナのスクロールと固定を実装する方法

ウォーターフォール フロー レイアウトを実装する 2 つの方法

ボタンがクリックされました

以上がフローティング親要素の高さを増やす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。