CSSフロートの特性についての簡単な説明

この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思います。

フロートには次のプロパティがあります。

テキストをカバーできません
フローティング要素の後にブロックレベル要素が続かない場合は、次の要素がフローティング要素と並んで配置されます（要素の幅が設定されていない場合、画面に収まらない場合は折り返されます）。
フローティング要素の前の要素がフローティングでない場合、フローティング要素は現在の行にのみフローティングします。フローティング要素がフローティング要素に遭遇すると、スペースが残っていない限り、1 行に並べられます。
要素の配置値が絶対または固定に設定されている場合、フローティングは無視されます。
floatは親要素の高さを縮小します
フローティング要素は次の要素の margin-top の影響を受けます。

テキストをカバーできません

<スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
       div{
           幅:100ピクセル;
           高さ:100px;
       }
        .item1{
            フロート:左;
            背景色: ピンク;
        }
        .item2{
            背景色: #58d3e2;
        }
    </スタイル>
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>

ご覧のとおり、テキストを除いて、item2 の div の他のすべてのコンテンツは、item1 の下で実行されるため表示されません。テキストがフローティング要素で覆われないのはなぜですか?フローティングの本質はテキストの折り返しを実現することだからです。

また、上記から、フローティング要素の後のブロックレベル要素がフローティング要素の位置を占め、フローティング要素は常に標準フロー要素の上にあると結論付けることができます。

フローティング要素の後にブロックレベル要素が続かない場合は、次の要素がフローティング要素と並んで配置されます（要素の幅が設定されていない場合、画面に収まらない場合は折り返されません）。

<スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
       div{
           幅:100ピクセル;
           高さ:100px;
       }
        .item1{
            フロート:左;
            背景色: ピンク;
        }
        .item2{
            表示: インラインブロック;
            背景色: #58d3e2;
        }
    </スタイル>
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>

フローティング要素の前の要素がフローティングでない場合、フローティング要素は現在の行にのみフローティングします。フローティング要素がフローティング要素に遭遇すると、スペースが残っていない限り、1 行に並べられます。

<スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
       div{
           幅:100ピクセル;
           高さ:100px;
       }
        .item1{
            背景色: ピンク;
        }
        .item2{
            フロート:左;
            背景色: #58d3e2;
        }
    </スタイル>
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>

 <スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
       div{
           幅:400ピクセル;
           高さ:100px;
           フロート: 左;
       }
        .item1{
            背景色: ピンク;
        }
        .item2{
            背景色: #58d3e2;
        }
        .item3{
            背景色: #61dafb;
        }
        .item4{
            背景色: #e9203d;
        }
    </スタイル>
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
<div class="item4">項目4</div>

適応を実現するために幅をパーセンテージで設定できます

 div{
           幅:25%;
           高さ:100px;
           フロート: 左;
       }

要素の配置値が絶対または固定に設定されている場合、フローティングは無視されます。

<スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
       div{
           位置: 絶対;
           フロート: 左;
           幅:100ピクセル;
           高さ:100px;
           境界線: 1px 実線の赤;
       }
    </スタイル>
 <div class="item1">フローティングとポジショニングの融合</div>

インライン要素がフローティングを使用すると、ブロックボックスが生成され、幅、高さ、マージン、パディングなどの属性を使用できるようになります。

 <スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
       [クラス^='アイテム']{

           フロート: 左;
           幅:100ピクセル;
           高さ:100px;
           行の高さ: 100px;
           テキスト配置: 中央;
       }
        .item1{
            フロート: 左;
            背景色: ピンク;
        }
        .item2{
            表示: インラインブロック;
            背景色: #58d3e2;
        }

    </スタイル>
<span class="item1">アイテム1</span>
<div class="item2">アイテム2</div>

floatは親要素の高さを縮小します

Web デザインでは、コンテンツに div をラッピングコンテナーとして割り当てることが非常に一般的です。このラッピングコンテナーは高さを設定せず、内部のコンテンツによってラッピングコンテナーの高さが拡張されます。子要素にフローティングを設定しない場合は問題ありません。ただし、子要素にフローティングを設定すると、親要素はフローティング要素の高さに適応できず、親要素の高さが 0 になるため、背景色などが表示されなくなります。理由は次のとおりです。

div の高さは事前に設定されていないため、div の高さは、含まれる子要素の高さによって決まります。フローティングはドキュメントフローの外側にあるため、子要素の高さは計算されません。このとき、div 内の子要素の高さは 0 に相当するため、親要素の高さが崩れてしまいます。

   <スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }

        。アイテム{
            フロート: 左;
            幅:100ピクセル;
            高さ:100px;
            背景色: ピンク;
        }

    </スタイル>
   <div class="box">
       <div class="item"></div>
   </div>

解決：

1. 親要素に「overflow:hidden」を追加する

もちろん「overflow:auto」にすることもできます。ただし、IE との互換性を保つには、overflow:hidden を使用するのが最適です。

。箱{
  オーバーフロー:非表示;
}

では、なぜ「overflow:hidden」がこの問題を解決するのでしょうか?

これは、「overflow:hidden」が BFC をトリガーし、それが「height:auto」の計算方法を決定するためです。

つまり、BFC の高さを計算するときに、フローティング要素も計算に含まれるため、このとき親要素はフローティング要素の高さに適応します。

そのため、「display:inline-block」、「position:absolute」、「float:left」を設定することで、親要素の高さの崩れの問題を解決することもできます。 BFC を作成できれば、フローティングの子要素をラップする効果を実現できるからです。そのため、インターネット上では「BFC はフローティング要素をラップできる」と言われています。

2. 親要素のコンテンツの後ろまたは前に疑似要素を追加し、フローティングをクリアする

::before または ::after を使用して親要素のコンテンツに疑似要素を追加し、そのコンテンツを空にして位置を占有しないようにすることができます。最後に、疑似要素に「clear:both」を追加してフロートをクリアします。

 <スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
        .box::after{
            コンテンツ： '';
            表示: ブロック;
            クリア:両方;
        }
        。アイテム{
            フロート:左;
            幅:100ピクセル;
            高さ: 100px;
            背景色: ディープピンク;
        }

    </スタイル>
<div class="box">
    <div class="item"></div>
</div>

なぜこれが可能なのでしょうか?

その理由を理解するには、2 つの点を知る必要があります。1 つは疑似要素の実際の機能であり、もう 1 つは CSS のフロートのクリアは要素自体にのみ影響し、他の要素には影響しないため、フロートのクリアは水平方向の配置を崩すものとして理解できるということです。

まず、::after と ::before の役割を理解する必要があります。これらは、要素の前後に疑似要素を挿入するのではなく、要素のコンテンツ (要素内) の前後に疑似要素を挿入します。以前は、:before 疑似要素と :after 疑似要素によって挿入されるコンテンツは、ターゲット要素の前または後に挿入されるものだと思っていました。実際には、挿入されるコンテンツは、関連付けられたターゲット要素の子要素になりますが、この要素のコンテンツの「前」または「後」に配置されます。例を見てみましょう。.box の高さが 300px であることがわかります。これは、2 つの疑似要素が .box コンテンツに挿入されていることを意味します。

<スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
        .box::before{
            コンテンツ: 'before';
            高さ: 100px;
            幅: 100ピクセル;
            表示: ブロック;
            クリア:両方;
            背景色: #61dafb;
        }
        .box::after{
            コンテンツ: 'after';
            幅:100ピクセル;
            高さ:100px;
            表示: ブロック;
            クリア:両方;
            背景色: アクアマリン;
        }
        。アイテム{
            フロート:左;
            幅:100ピクセル;
            高さ: 100px;
            背景色: ディープピンク;
        }

    </スタイル>
<div class="box">
    <div class="item"></div>
</div>

まとめると、浮動小数点をクリアするために、以下の方法がよく使用されます。

.box::after{
  コンテンツ：'';
  表示:ブロック;
  クリア:両方;
}
または.box::before{
  コンテンツ：'';
  表示:ブロック;
  クリア:両方;
}
または.box::before,.box::after{
  コンテンツ：'';
  表示:ブロック;
  クリア:両方;
}
//::before と ::after は、content 属性で使用する必要があります。content は、挿入されるコンテンツを定義するために使用されます。content には値があるか、少なくとも空である必要があります。デフォルトでは、疑似要素の表示はデフォルト値の inline ですが、display:block を設定することで変更できます。

親要素のコンテンツの前後に疑似要素を挿入します。コンテンツを空に設定すると、コンテンツが位置を占有しなくなります (高さは 0)。「clear:both」は親要素の左と右のフロートをクリアし、フローティング要素に遭遇したときに .box::before と .box::after がラップされるようにして、高さが拡張されます。親要素はこの高さに適応するため、高さが崩れることはありません。

高さの崩壊を解決する他の方法は、これら 2 つのアイデアに基づいています。1 つは BFC をトリガーすること、もう 1 つは要素 + クリアフロート (clear) を追加することです。

フローティング要素は次の要素の margin-top の影響を受けます。

<スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
        div{
            幅:100ピクセル;
            高さ:100px;
        }
        div:n番目の型(1){
            フロート: 左;
            背景色: #61dafb;
        }
        div:n番目の型(2){
            上マージン: 100px;
            背景色: #58d3e2;
        }

    </スタイル>
<div>div1</div>
<div>div2</div>

最初の div も下に続いているのがわかります。解決策は、次の要素に clear を設定することです。このとき、次の要素の margin-top は無効になります。

<スタイル>
        本文、div{
            マージン:0;
            パディング:0;
        }
        div{
            幅:100ピクセル;
            高さ:100px;
        }
        div:n番目の型(1){
            フロート: 左;
            背景色: #61dafb;
        }
        div:n番目の型(2){
            クリア:両方;
            上マージン: 100px;
            背景色: #58d3e2;
        }

    </スタイル>
<div>div1</div>
<div>div2</div>