CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

デフォルトのドキュメントフロー配置とも呼ばれる

1. 各要素はページ上で独自のスペースを持つ

2. 各要素は親要素の左上隅からレンダリング（表示）されます。

3. ブロックレベル要素は上から下へ1つずつ配置され、各要素は別々の行に配置される。

4. インライン要素は、複数の要素を1行に表示し、左から右に並べ、改行なしで表示します。

②フローティングポジショニング

ブロックレベル要素を水平に表示する

フロート：

値: left 要素がフロートされた後、現在の行の親要素の左側、または左側のフロート要素の隣にドッキングされます。

要素がフロートされると、現在の行の親要素の右側、または右側のフロート要素の隣にドッキングされます。

デフォルト値なし、浮動小数点なし

浮遊特性

1. 要素がフロートすると、ドキュメントフローから外れます（ページスペースを占有せず、後続の非フロート要素がその位置を埋めるために前方に移動します）。

2. フローティング要素は、現在の行の親要素の左側/右側にドッキングするか、他のフローティング要素の端にドッキングします。

3. 親要素がすべてのフローティング要素を水平に表示できない場合、表示できない最後の要素が自動的に折り返されます。

4. フローティングは、複数のブロックレベル要素が同じ行に表示される問題を解決するために使用されます。

③フローティングポジショニングによる特殊な状況

1. 浮動要素の配置の問題

要素がすべてのフローティング要素を表示できない場合、表示できない最後の要素が折り返されます。

ただし、フロート要素は、自身のフロート方向に応じて位置を占めます。

押し下げられたフローティング要素は邪魔にならない場所に移動し、さらに下に表示される必要があります。

2. 要素がフロートされると、その要素の幅が定義されていない場合、フロート後の要素の幅はコンテンツに基づいて決まります。

3. 要素がフロートされると、ブロックレベル要素になります。

サイズと垂直余白を設定できます

4. テキストとインライン要素はフローティング要素によって押し下げられません。代わりに、巧みにそれを回避し、フローティング要素の周囲に表示します。

以前は、画像の周囲にテキストを折り返す効果を作成するために、フローティング機能を使用することがよくありました。

小さなデモを書いてみましょう:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>浮遊要素-シャオリン</title>
    <スタイル>
      .box,.box1{ 幅:100%; 高さ:200px;}
      .box{マージン下部: 201px;}
      .box3{ 幅: 800px; 高さ: 50px;}
      .item{float: 左; }
      .box .item{ 幅:500px; 高さ: 100%;}
      .box1 .item{ 高さ: 100%;}
      .red{背景: 赤;}
      .green{背景: 緑;}
      .pink{背景: ピンク;}
      .black{背景:#ddd;}
      .block{ 幅:100px; 高さ:100px; 背景: #ddd; フロート: 右;}
    </スタイル>
</head>
<本文>
    <h3>ブロックの幅を設定する</h3>
    <div class="box">
        <div class="item red">abcdefghigklmn</div>
        <div class="item green">abcdefghi</div>
        <span class="item pink">abcdefghi</span>
        <div class="item black">abc</div>
    </div>
    <h3>幅が設定されていないブロック</h3>
    <div class="box1">
        <div class="item red">abcdefghigklmn</div>
        <div class="item green">abcdefghi</div>
        <span class="item pink">abcdefghi</span>
        <div class="item black">abc</div>
    </div>
    <h3>テキストはフローティング要素の周囲に折り返されます</h3>
    <div class="box3">
        <div class="block"></div>
        <span>1. 偉大な人物の最も顕著な特徴は、その強い意志です。環境がどのように変化しても、彼の初心と希望は少しも変わることはなく、最終的には障害を克服し、望んだ目標を達成します。
            2. 他人の目に騙されないでください。自分の心に基づいて他人の考えを推測するのは愚かなことです。自分の感情をコントロールすることしかできないなら、毎日良い気分を維持するようにしてください。
            3. 人々が逆境に陥ったとき、環境に適応する能力は本当に驚くべきものです。人間は素晴らしい潜在力と忍耐力を持っているので、不幸にも耐えることができます。それを活用する決心さえあれば、困難を乗り越えることができるでしょう。
            4. あなたを疲れさせるのは、目の前の山ではなく、靴の中にある砂粒です。人生は冒険です。嵐の夜でも、あなたを支えてくれるのは、あなたの揺るぎない信念だけです。
            5. 財産を失っても、失うものはわずかです。名誉を失えば、多くのものを失います。勇気を失えば、すべてを失います。
      </span>
    </div>
</本文>
</html>

④ クリアフローティング

以前のフローティング要素をクリアする

要素がフロートされると、その要素はドキュメントフローから外れ、後続の非フロート要素はその位置を埋めるために前方に移動されます。

後続の要素がその位置を埋めたくない場合は、この要素にクリアフローティングを設定する必要があります。

クリア：

値: 1.left 左フローティングの効果をクリアします

2.右のフローティングの効果をクリアする

3. どちらも私に対する左右の浮遊の影響を解消します

4.どれも影響をクリアしない

⑤高崩壊

ハイコラプスとは何ですか?

1. 親要素の高さは低く、高さは子要素によってサポートされます。

2. すべての子要素はフローティングです

すると、すべての子要素がドキュメントフローの外側に出て、親要素はその中に要素が存在しないものと認識します。

したがって、親要素には高さがありません。

写真を見る

解決：

1. 親要素もフロートします。デメリット: 親要素の後ろにある非フロート要素に影響します (後ろにある非フロート要素はドキュメントフローを占有し、前のフロート要素を占有している要素の位置を埋めます (ドキュメントフロー外))

2. 親要素の高さを直接記述することの欠点は、必ずしも具体的な高さがわからないことです（例えば、下の図のTaobaoのウェブサイト上のいくつかの商品リストでは、商品の数がわからないため、対応する親要素の高さも不明です。これは、親要素の具体的な高さがわからない状況を説明するための例にすぎず、Taobaoがレイアウトにフローティングを使用しているという意味ではありません～）

3.オーバーフロー：隠れた欠点により、オーバーフローが表示されなくなります

4. 親要素にブロックレベル要素を追加します。このブロックレベル要素にはコンテンツも高さもありません。 clear:both とだけ書いてください。これにより、親要素はドキュメントフロー内のコンテンツの高さを見つけることができます。

（１）ブロックレベルの親要素を親要素内に直接追加すると、次のような結果になります。①コードが美しくない②後からメンテナンス担当者が（役に立たないコードだと思い込んで）誤って削除してしまう可能性がある

（２）親要素は擬似要素:afterを使用し、フローティング要素をクリアする。

ついに高さ崩壊問題が完璧に解決されました！

参照コード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>フローティングの問題の解決 - 親要素の高さの縮小</title>
    <スタイル>
       .box1,.box2,.box3,.box4,.box5{幅:400px;背景:緑黄色;}
       /* .box3{幅: 500px;} */
       .box1{マージン下部: 201px;}
       .item{ 幅:180px;高さ:180px;}
       .mr{ 右マージン: 30px;}
       .red{背景: 赤;}
       .blue{背景:青;}
       .green{背景: 緑;}
       .pink{背景色: ピンク;}
       .float-left{float:left}
       .item2,.item3{幅:100%;高さ:180px;}
       .box3{オーバーフロー: 非表示;}
       .clear{clear:both}
       .box5::after{display: block;content: '';clear: both;}
    </スタイル>
</head>
<本文>
    <h3>親要素の高さ崩壊現象</h3>
    <div class="box1">
        <div class="item float-left mr red"></div>
        <div class="item float-left blue"></div>
    </div>

    <h3>親要素の高さが崩れる問題の解決策 1 - 親要素もフロートする</h3>
    <div class="box2 float-left">
        <div class="item float-left mr red"></div>
        <div class="item float-left blue"></div>
    </div>
    <!--- 次の非フローティング要素への影響: 非フローティング要素にはドキュメント フローがあり、前のフローティング要素の位置を埋めます -->
    <!-- <div class="item2 green">1</div> 
    <div class="item2 pink">2</div> -->

    <h3>親要素の高さの縮小の解決策 3——overflow:hidden</h3>
    <div class="box3">
        <div class="item float-left mr red"></div>
        <div class="item float-left blue"></div>
        <!-- <div class="item blue"></div> -->
        <!-- <span class="box3">sdcvsdcvsdvsdvsdfvsdvsvzsdfvasfvadav</span> -->
    </div>

    <h3>親要素の高さが崩れる解決策 4 - ブロックレベル要素を追加する (1)</h3>
    <div class="box4">
        <div class="item float-left mr red"></div>
        <div class="item float-left blue"></div>
        <div class="clear"></div>
    </div>

    <h3>親要素の高さが崩れる問題の解決策 4 - ブロックレベル要素の追加 (2)</h3>
    <div class="box5">
        <div class="item float-left mr red"></div>
        <div class="item float-left blue"></div>
    </div>
</本文>
</html>

これで、フローティングによって親要素の高さが崩れる問題を解決する CSS のいくつかの方法についての記事は終了です。フローティングによって親要素の高さが崩れる問題に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の高さが崩れるという問題があることは誰もが知っています。

それでは、この問題の解決策を一緒に探ってみましょう。ドキュメントフローから始めましょう。

1. ポジショニングの分類