まず、ボックスコラプスとは何でしょうか? 親ボックスの内側にあるべき要素が外側にあります。 第二に、箱はなぜ崩壊するのでしょうか? 親要素が十分なサイズに設定されておらず、子要素がフロートに設定されている場合、子要素は親要素の境界(ドキュメント フローの外)から飛び出します。特に、親要素の高さが自動で、親要素内にフロートしていない他の表示要素がない場合、親ボックスの高さは直接 0 に縮小されます。これを CSS の高さ縮小と呼びます。 次の図では、下部の 2 つの子要素のボックスがそれぞれ左と右にフロートするように設定されており、上部の長いボックスは折りたたまれています。 元: 3. ボックスの崩壊に対するいくつかの解決策 最も単純で直接的かつ大まかな方法は、ボックスのサイズをハードコードし、各ボックスの幅と高さを適切な値になるまで固定することです。この方法の利点は、シンプルで便利、互換性が良い、コンテンツの変更が少なくボックスのレイアウトを伴わないレイアウトに適していることです。欠点は、適応性がなく、ブラウザのウィンドウサイズがユーザーエクスペリエンスに直接影響することです。 外側の親ボックスにフロートを追加して、標準のドキュメント フローから分離します。この方法は便利ですが、ページ レイアウトにはあまり適しておらず、保守が困難です。 親ボックスにオーバーフロー プロパティを追加します。
親ボックスの下部にクリアフロートを導入します。最も単純なものは次のとおりです。 <br style="clear:both;"/> 多くの人がこの問題を解決していますが、不要な冗長要素が導入されるため、お勧めしません。 after 疑似クラスはフロートをクリアします。 外側のボックスの after 疑似要素は clear プロパティを設定します。 #親:後{ クリア: 両方; コンテンツ: ""; 幅: 0; 高さ: 0; 表示: ブロック; 可視性: 非表示; } これは、フローティングによって発生するボックスの崩壊を解決するための純粋な CSS メソッドです。冗長な要素は導入されません。このメソッドは、CSS ボックスの崩壊を解決するために推奨されます。 注意: 5 番目の方法は良いですが、IE の下位バージョンとは互換性がありません。選択する具体的な解決策は、実際の状況に基づいて決定できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Web 標準アプリケーション: Tencent QQ ホームページの再設計
>>: 見落としがちなMySQLのCOLLATIONの例の詳細な説明
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...
データ ボリューム コンテナーは、データ ボリュームをマウントするために特別に使用されるコンテナーで...
CentOS6.9+Mysql5.7.18 ソースコードのインストールでは、以下の操作を root ...
ロックの概念①. 現実世界では、鍵は外の世界から身を隠したいときに使う道具です。 ②. コンピュータ...
環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...
編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...
コードをコピーコードは次のとおりです。 <span style="font-size...
序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...
Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...
目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...
目次コンセプト配列の分割値を個別に宣言して割り当てるデフォルト値の構造化解除変数値の交換関数によって...
Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...