[Web フロントエンド] CSS の子 div が float_html/css_WEB-ITnose に設定された後、親 div が高さに適応できません

注: zctya さんのブログより転載

CSS+DIV を使ったレイアウトでは、DIV がフローティングの場合に、DIV の高さが親 DIV の高さを超えると、親 DIV の高さになってしまうことがよくあります。それに応じて調整することはできません。この問題を解決するには (フロートを閉じる (クリアする) とも呼ばれます)、次の 4 つの方法があります:

1. 追加ラベル メソッド

このメソッドは、親コンテナの最後に追加のラベルを挿入し、フロートをクリアします。 (クリア) 親コンテナを展開します。この方法はブラウザーとの互換性が高く、問題はありません。欠点は、追加の (通常は意味論的に非セマンティックな) タグが必要なことです。シンプルで実用的でブラウザとの互換性が高いため、個人的にはこの方法を好みます。この方法は W3C でも推奨されています。このメソッドは、親コンテナーの after 疑似クラスとコンテンツ宣言を使用して、指定された現在のコンテンツの末尾に新しいコンテンツを追加します。一般的なアプローチは、小さくて目立ちにくいため、「ドット」を追加することです。次に、それを使用してフロートをクリアし (フロート要素を閉じ)、コンテンツを非表示にします。この方法には一般的な互換性がありますが、さまざまなハックを通じてさまざまなブラウザーを処理でき、同時に HTML を比較的きれいに保つことができます。

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

3. オーバーフローを非表示または自動に設定する

このメソッドは、標準準拠のブラウザでフローティング要素を閉じるために、親コンテナのオーバーフローを非表示または自動に設定します。ただし、オーバーフローを使用すると、ページのパフォーマンスに影響が出る可能性があり、その影響は不確実です。複数のブラウザでページをテストするのが最善です。

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

overflow:auto; は高さを適応させるためのもので、zoom:1; は IE6 との互換性のためであり、height:1%; で解決することもできます。

4. フローティング外部要素、float-in-float

この方法は、フローティング要素の特性を利用して、親コンテナをフローティングにします。フローティング要素はフローティング要素を閉じます。この方法は IE/Win および標準互換ブラウザでは良好な結果をもたらしますが、欠点も明らかです。結局のところ、フローティングは特殊な動作であり、レイアウトがフローティングにならない場合があります。浮かせるのも正常です。