CSS ボックス崩壊問題の 4 つの解決策

一。問題の再述##

はい、これが崩壊したボックスです。外部ボックスは内部の 2 つのフローティングボックスを包むべきでしたが、結果としてそうなりませんでした。

二。問題発生の原因##

3 つのボックスはすべて width だけが設定され、height は設定されていません。内部の 2 つのボックスはそれぞれ左右のフロートを設定しています。レイアウトはこれだけシンプルですが、結果は私たちの想像とは大きく異なります。

問題発生の原因は、内部の 2 つのボックスが float プロパティを持っており、float プロパティは要素を標準ドキュメントフローから引き抜くことです。直接的な結果として、外部ボックスは 2 つの子供を見失い、内部には他のボックスがないため、外部ボッ��スはテキストノードコンテンツだけを包み、2 つの内部ボックスを外に置き去りにしました。

三。解決策##

1. 上記で問題発生の原因を分析しました。難なく最初の解決策が見つかります（子供がいなくなったなら、探しに行けばいい）

——外部ボックスにもフロートを追加

外部ボックスも標準ドキュメントフローから引き抜き、子供たちに会わせるようにします。

欠点：可読性が悪く、メンテナンスが難しい（他の人がなぜ親要素にも float を追加する必要があるのか理解しにくい）。また、ページ全体レイアウトの調整が必要になる可能性があります

2. ——外部ボックス内の最下部に clear プロパティを持つ空のボックスを追加

div でも他のブロックレベル要素でも構いません。最もシンプルなのは：
をボックス内底部に配置することです

最下部の空ボックスでフロートをクリアし、ボックスを再び膨らませます。

欠点：冗長な要素を導入すること

3. ——overflow:auto でフロートをクリア

外部ボックスにこのプロパティを追加するだけです

とてもシンプルです

欠点：ボーダーやマージンを適用するとスクロールバーが表示される可能性があり、外観に影響します

4. ——after 疑似要素でフロートをクリア

外部ボックスの after 疑似要素に clear プロパティを設定し、それを非表示にします

これは実際、空ボックス方式の改善版で、純粋な CSS 解決策であり、冗長な要素を導入する必要がありません。これは書籍で推奨され、ネットワーク上で提供されているベストソリューションですが、問題は [IE7-] が after 疑似要素をサポートしていないことです。書籍では [IE6-] はハック：.wrapper{height:1%;} と組み合わせて使用する必要があると述べられていますが、どちらが正しいかはさておき、[IE7-] は実際には問題を引き起こさないようで、画像を見てみましょう。

四。テスト結果##

（IE6/7 のテスト結果は IETester から、IE8 と FF はローカルマシンからのものです。Chrome の結果は FF とほぼ同じですが、Chrome のズームがあまり科学的ではないため、スクリーンショットは撮りませんでした。面白いことに、スクリーンショットを注意深く見ると：IE6/7/8 の表示効果がすべて異なることがわかります。。。）

実験ソースコードをクリックして直接テストできます。どの方法がより良いかは一概には言えませんが、IETester のテスト結果から見ると、同じコードでも IE でボックス崩壊問題を引き起こさないようです。IETester が間違っていなければ、IE にはそもそもボックス崩壊の問題がないはずです。

しかし、いくつかの選択肢があるのは良いことで、具体的な状況に応じて選択できます。

余談###

実際、最も直接的な方法もあります：各ボックスに width と height を設定し、必要な大きさにすればいいだけです。しかし、これは解決策とは言えません。なぜなら、このようなレイアウトはコンテンツに適応しないからです。ただし、ページコンテンツがほとんど変更されない場合、これは良い方法です。なぜなら、その互換性は疑いの余地がないからです。