CSSの高さの崩壊問題についての簡単な説明

CSSの高さの崩壊問題についての簡単な説明

パフォーマンス

例えば:

HTML:

<div class="first">
    <div class="first-child1">最初の子1</div>
    <div class="first-child2">最初の子2</div>
</div>
<div class="second">
    2番
</div>
<div class="third">
    三番目
</div>

CS: ...

。初め{
    幅: 300ピクセル;
    背景色: ピンク;
}
.first .first-child1,.first .first-child2{
    フロート: 左;
    幅: 100ピクセル;
    高さ: 100px;
}
.first .first-child1{
    背景色: 紫;
    右マージン: 10px;
}
.first .first-child2{
    背景色: 赤;  
}
。2番{
    幅: 200ピクセル;
    高さ: 150px;
    背景色: 青;
}
。三番目{
    幅: 100ピクセル;
    高さ: 150px;
    背景色: 緑;
}

それは次のように現れます:

原因

上記の例からわかるように、最初のボックスには高さが設定されておらず、子要素によって引き伸ばされています。ただし、子ボックスはフロートに設定されており、標準フローから外れているため、最初のボックスには高さがなく、2 番目と 3 番目のボックスが上に移動します。

高い崩壊率の理由は次のように結論付けられます。

ドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つまり、親要素の高さは子要素の高さと同じになります。ただし、子要素をフロートに設定すると、ドキュメントフローから完全に外れてしまいます。このとき、子要素は親要素の高さをサポートできず、親要素の高さが崩れてしまいます。親要素の高さが縮むため、親要素の下にあるすべての要素が上に移動し、ページレイアウトが乱雑になります。

高い崩壊に対する解決策:

1. 親要素に固定の高さを設定します。ただし、この方法を使用した後、子要素に合わせて親要素の高さを自動的に増やすことはできません。高さを固定できる場合は、自分のページの特性に合わせてこの方法を使用できます。そうでない場合は、この方法はお勧めしません。

2. 追加タグ方式: これは W3C が推奨する解決策ですが、HTML の原則は意味のあるタグを記述することであるため、推奨されません。この方法では、意味のないタグが追加されます。

<div class="first">
    <div class="first-child1">最初の子1</div>
    <div class="first-child2">最初の子2</div>
    <div style="clear: both;"></div>
</div>

3. 親要素のオーバーフロープロパティ(要素の BFC を開く):

.clearfix{
    オーバーフロー: 非表示;
}

この方法を使用すると、属性値は任意の非表示 (hidden/auto/scroll) にすることができますが、hidden が推奨されます。

このメソッドは副作用が少なくなります。このメソッドは IE6 ではサポートされていません。zoom: 1; を追加できます。

.clearfix::after{
    content: "";/*疑似要素のコンテンツは空です*/
    display: block;/*デフォルト以外でも問題ありません。テーブルなどでも構いません。*/
    height: 0;/*疑似要素の高さは0で、他の要素には影響しません*/
    clear: both;/*フロートをクリア*/
    visibility: hidden;/*非表示*/
}
.clearfix{
    zoom: 1;/*IE6 要素には BFC モードはありませんが、このコードは IE6 で hasLayout モードをオンにします。これは IE でのみサポートされています*/
}

4. 単一の疑似要素の後のフロートをクリアします(要素の BFC をオンにします)。

.clearfix::after{
    content: "";/*疑似要素のコンテンツは空です*/
    display: block;/*デフォルト以外でも問題ありません。テーブルなどでも構いません。*/
    height: 0;/*疑似要素の高さは0で、他の要素には影響しません*/
    clear: both;/*フロートをクリア*/
    visibility: hidden;/*非表示*/
}
.clearfix{
    zoom: 1;/*IE6 要素には BFC モードはありませんが、このコードは IE6 で hasLayout モードをオンにします。これは IE でのみサポートされています*/
}

この方法は現在広く使用されています。多くの大規模な Web サイトがこの方法を使用しています。副作用が少なく、IE6 で処理するだけで済みます。

5. 二重疑似要素のクリアフローティング(要素の BFC を開く):

.clearfix::before、.clearfix::after{
    コンテンツ: "";
    表示: ブロック;
    クリア: 両方;
}
.clearfix{
    zoom: 1;/*IE6 要素には BFC モードはありませんが、このコードは IE6 で hasLayout モードをオンにします。これは IE でのみサポートされています*/
}

このアプローチは記述が面倒なので、お勧めできません。

親要素のフローティングの影響をクリアした後の効果:

BFC関連

W3C 標準によれば、ページ内の各要素には、ブロック フォーマット コンテキスト (略して BFC) と呼ばれる暗黙の属性があります。この属性はオンまたはオフに設定でき、デフォルトではオフになっています。

要素の BFC がオンになっている場合、その要素には次の特性があります。

1. 親要素の垂直余白は子要素と重ならない

2. BFCが有効になっている要素はフローティング要素によって覆われません

3. BFCが有効になっている要素にはフローティングサブ要素を含めることができます

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Vueはランニングライトのシンプルな効果を実現

>>:  テーブルリストを破棄するには、標準のdl、dt、ddタグを使用します。

推薦する

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

Linux でタイムアウト付きの接続関数を試す

前回の記事では、Windows でタイムアウトを試してみました。この記事では、Linux で試してみ...

MySQLコンテナ間のレプリケーション構成例の詳細な説明

背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...

Javascript配列の重複排除のいくつかの方法の詳細な説明

目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

JS はシンプルなカレンダー効果を実装します

この記事では、シンプルなカレンダー効果を実現するためのJSの具体的なコードを参考までに紹介します。具...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

CSSボックスの表示/非表示とトップレイヤーの実装コード

.imgbox{ 幅: 1200ピクセル; 高さ: 612px; 右マージン: 自動; 左マージン...

Linux の 5 ステップ ビルド カーネル ツリー

目次0. システムに付属するカーネルツリー1. 環境設定最初のステップステップ2 2. ソースコード...

Vue.jsで実装されたカレンダープラグインの使い方を詳しく説明します

本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...

テーブルレイアウトの長所と短所、そして推奨されない理由

テーブルの欠点1. テーブルは他の HTML タグよりも多くのバイトを占有します。 (ダウンロード時...

Nginx に lua-nginx-module モジュールをインストールする方法

ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

Ace をベースにした Markdown エディターを共有する

エディターは 2 つのカテゴリに分かれていると思います。1 つは、即時レンダリングを実現するために左...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...