CSS レイアウトのヒント: 子要素がフローティングされた後に親コンテナを閉じる

過去 2 か月間、私は断続的にいくつかの Web サイトでアーティストとして作業をしてきましたが、その過程で DIV+Css の標準的な開発についての理解が深まりました。私にとって最も得したことは 2 つあります。1 つは CSS ボックス モデルを完全に理解できたことです。もう 1 つは、長い間私を悩ませてきた「閉じた浮動要素」の問題を解決できたことです。
一般に、子要素が float を使用している場合、親要素は子要素がどこで終了するかを常に正確に把握できるわけではないため、親要素の下の境界線は常に子要素の中央または上部を通過し、非常に不快に見えます。
最初は、子要素の後に <br /> または <div></div> を追加し、その属性を「clear:all;」に設定しましたが、これには多くの無駄なスペースが必要になり、さらには一部の Web サイトが必要になります。これらの空のタグを自動的に追加するには ASP コードを変更する必要がありますが、これは最後の手段としか考えられません。
後で、親タグもフロートに設定すると、正しい位置で閉じることができることがわかり、この方法で、多くの ASP コードを変更する必要がなくなります。 Clear 属性を追加する必要がある 空のタグをテンプレートから追加できず、ASP コードから追加する必要がある場合は、ASP コードを変更する必要はありません。親コンテナをフローティングに設定するだけです。 ASP を変更する必要がある場合は、親コンテナを変更する必要があります。親コンテナをフローティングに設定し、レイヤーごとにフローティングすると、問題は常に解決されます。これにより多くの手間は省けますが、ページ全体が浮動要素で埋め尽くされてしまう可能性が高くなります。-_-!!! これは中程度の戦略としか考えられません。
その後、インターネットで他のことを検索していたときに、親コンテナの CSS プロパティに次の 2 つのプロパティを追加するだけで問題が解決するという人を偶然見つけました。


私はそれを試してみましたが、非常にうまくいきました。このように、これが現時点でこの問題を解決する最良の方法であると考えられます。ページのタスクを変更する必要はなく、基本的に親を変更する必要もありません。コンテナ - 親コンテナの親コンテナも変更する場合は、2 つの無関係な属性を親コンテナに追加するだけで完了です。