まず、ボックスコラプスとは何でしょうか? 親ボックスの内側にあるべき要素が外側にあります。 第二に、箱はなぜ崩壊するのでしょうか? 親要素が十分なサイズに設定されておらず、子要素がフロートに設定されている場合、子要素は親要素の境界(ドキュメント フローの外)から飛び出します。特に、親要素の高さが自動で、親要素内にフロートしていない他の表示要素がない場合、親ボックスの高さは直接 0 に縮小されます。これを CSS の高さ縮小と呼びます。 次の図では、下部の 2 つの子要素のボックスがそれぞれ左と右にフロートするように設定されており、上部の長いボックスは折りたたまれています。 元: 3. ボックスの崩壊に対するいくつかの解決策 最も単純で直接的かつ大まかな方法は、ボックスのサイズをハードコードし、各ボックスの幅と高さを適切な値になるまで固定することです。この方法の利点は、シンプルで便利、互換性が良い、コンテンツの変更が少なくボックスのレイアウトを伴わないレイアウトに適していることです。欠点は、適応性がなく、ブラウザのウィンドウサイズがユーザーエクスペリエンスに直接影響することです。 外側の親ボックスにフロートを追加して、標準のドキュメント フローから分離します。この方法は便利ですが、ページ レイアウトにはあまり適しておらず、保守が困難です。 親ボックスにオーバーフロー プロパティを追加します。
親ボックスの下部にクリアフロートを導入します。最も単純なものは次のとおりです。 <br style="clear:both;"/> 多くの人がこの問題を解決していますが、不要な冗長要素が導入されるため、お勧めしません。 after 疑似クラスはフロートをクリアします。 外側のボックスの after 疑似要素は clear プロパティを設定します。 #親:後{ クリア: 両方; コンテンツ: ""; 幅: 0; 高さ: 0; 表示: ブロック; 可視性: 非表示; } これは、フローティングによって発生するボックスの崩壊を解決するための純粋な CSS メソッドです。冗長な要素は導入されません。このメソッドは、CSS ボックスの崩壊を解決するために推奨されます。 注意: 5 番目の方法は良いですが、IE の下位バージョンとは互換性がありません。選択する具体的な解決策は、実際の状況に基づいて決定できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Web 標準アプリケーション: Tencent QQ ホームページの再設計
>>: 見落としがちなMySQLのCOLLATIONの例の詳細な説明
<br />原文: http://research.microsoft.com/~hel...
この記事では、カルーセルチャートの小さなケースを実装するためのJSの具体的なコードを参考までに共有し...
1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...
WindowsとLinux間のファイル転送(1)WinSCPを使用して、WindowsファイルをLi...
目次仮想DOM仮想DOMとは何か仮想DOMの役割Vue の仮想 DOM vノードvNodeとはvNo...
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...
1. MySQL 8.0.12 バージョンのインストール手順。 1. ダウンロードhttps://d...
私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...
Win10 システムでの MySQL 8.0.20 のインストールと設定の超詳細なチュートリアルMy...
Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...
Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...
純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...
目次サイクル比較使用法要約するサイクル比較ヴュー2ヴュー3作成前設定作成された設定マウント前マウント...
序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...
目次総合的な比較アクティブの観点から機能的な観点から詳細な比較1. エース2. コードミラー3. モ...