CSS のフローティング サンプル コードをクリアする方法

概要

この記事のフレームワーク図は次のとおりです。

1. フローティングとは一体何でしょうか?

W3school で定義されているフローティングの定義は、フローティング ボックスは、その外縁が包含ボックスまたは別のフローティング ボックスの境界に触れるまで、左または右に移動できるというものです。フロート ボックスはドキュメントの通常フローから外されるため、ドキュメントの通常フロー内のブロック ボックスは、フロート ボックスが存在しないかのように動作します。

IE 以外のブラウザ (Firefox など) では、コンテナの高さが自動で、コンテナのコンテンツにフローティング要素 (フロートが左または右) がある場合、コンテナの高さはコンテンツの高さに合わせて自動的に伸縮できず、コンテンツがコンテナの外側に溢れ、レイアウトに影響を与えたり (またはレイアウトを破壊したり) します。この現象をフローティングオーバーフローと呼びます。この現象を防ぐために行われる CSS 処理を CSS フロートクリアと呼びます。

2.フローティングの特徴は何ですか？

フローティングの特性は、ラベルの分離、エッジの接着、文字の周囲、収縮の 8 つの単語に要約できます。

より詳しい説明については、次の図をご覧ください。
box1 が左にフロートされると、ドキュメント フローから削除され (境界外)、その左端が包含ボックスの左端に接触するまで左に移動されます (接着)。ドキュメント フローに含まれなくなったため、スペースを占有せず、実際にボックス 2 を覆い、ビューから消えます。ボックス 2 にテキストがある場合は、ボックス 1 (単語の円) の周囲に配置されます。

3 つのボックスすべてを左にフロートすると、ボックス 1 は、それを含むボックスに当たるまで左にフロートし、他の 2 つのボックスは、前にフロートしたボックスに当たるまで左にフロートします。

以下では、4番目の特徴である収縮に焦点を当てます。

フロートされたインライン要素 (span img タグなど) は、display:block を設定せずに幅を設定できます。

<スタイル>
        div{
            フロート: 左;
            背景色: 緑黄色;
        }
    </スタイル>
</head>
<本文>
<div>
    これはテキストの段落です</div>
</本文>

以下の結果が得られます。

div タグはブロック レベルの要素であり、1 行を占めることは誰もが知っています。ただし、上記の例では、div を左にフロートするように設定した後、その幅は 1 行を占めなくなり、内部要素の幅に狭まります。これがフローティングの 4 番目の特性の意味です。

3. フローティングのデメリットは何ですか?

まず次のコードを見てみましょう。

 <スタイル>
      。親{
          境界線: 実線 5px;
          幅:300ピクセル;
      }
      .child:n番目の子(1){
          高さ: 100px;
          幅: 100ピクセル;
          背景色: 黄色;
          フロート: 左;
      }
      .child:n番目の子(2){
          高さ: 100px;
          幅: 100ピクセル;
          背景色: 赤;
          フロート: 左;
      }
      .child:n番目の子(3){
          高さ: 100px;
          幅: 100ピクセル;
          背景色: 緑黄色;
          フロート: 左;
      }
    </スタイル>
</head>
<本文>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
</本文>

親コンテナーで 3 つのフローティング要素をラップしたいのですが、結果は次のようになります。

これはフローティングの副作用です。親コンテナの高さが縮小されるため、フロートのクリーンアップが明らかに重要になります。

4. フロートをクリーンアップするにはどうすればいいですか?

フロートをクリアしても、フロートが削除されるわけではありません。フロートをクリアすると、親コンテナの高さが縮小されます。

ルーチン 1: フローティング要素の親要素に高さを追加する (スケーラビリティが低い)

要素をフロートさせる場合、その親要素には高さが必要です。フローティングを収容できるのは、特定の高さのボックスのみです。親要素の高さを直接設定できます。実際のアプリケーションでは、すべてのボックスに高さを追加することはほとんどなく、面倒なだけでなく、ページの急速な変更に適応することもできません。代わりに、親コンテナーの高さをコンテンツ（img画像など）によって拡張することもできます。この方法は実際にはより一般的に使用されています。

ルーチン 2: clear:both;

最後の冗長要素を最後の子要素に追加し、clear:both に設定して、フローティングをクリアできるようにします。ここで強調しておきたい点は、親要素の最後に追加される要素はブロックレベル要素である必要があるということです。そうでないと、親要素の高さをサポートできなくなります。

    <div id="wrap">
        <div id="内部"></div>
        <div style="clear: both;"></div>
    </div>

  ＃包む{
          境界線: 1px 実線;
    }
    #インナー{
          フロート: 左;
          幅: 200ピクセル;
          高さ: 200px;
          背景: ピンク;
    }

ルーチン3: 擬似要素クリアフロート

上記の方法では確かにフロートをクリアできますが、これらの意味のない冗長な要素をページに追加したくはありません。現時点でフロートをクリアするにはどうすればよいでしょうか。
:after 疑似要素と IEhack を組み合わせると、すべての主要ブラウザと完全に互換性を持つことができます。ここでの IEhack は、hasLayout をトリガーすることを指します。

<div id="wrap" class="clearfix">
    <div id="内部"></div>
</div>

   ＃包む {
        境界線: 1px 実線;
      }
      #内部 {
        フロート: 左;
        幅: 200ピクセル;
        高さ: 200px;
        背景: ピンク;
      }
      /*haslayout をオンにする*/
      .clearfix {
        *ズーム: 1;
      }
      /*IE6 7 は疑似要素をサポートしていません*/
      .clearfix:後{
        コンテンツ： '';
        表示: ブロック;
        クリア: 両方;
        高さ:0;
        行の高さ:0;
        visibility:hidden; // ブラウザでレンダリングは許可するが、表示は許可しない}

フローティング要素の親コンテナーに clearfix クラスを追加し、このクラスに :after 疑似要素を追加して、要素の末尾に非表示のブロック要素を追加し、フロートをクリアします。これはフロートを洗浄するための一般的な解決策であり、推奨されます

ルーチン 4: 親要素に overflow:hidden を使用します。

このソリューションにより、親コンテナーは BFC (ブロック フォーマット コンテキスト) を形成できるようになり、BFC にはフロートを含めることができます。これは通常、フローティング親要素の高さの崩壊の問題を解決するために使用されます。

BFC をトリガーする方法

親要素に次の属性を追加することで、BFC をトリガーできます。

• フロートは左 | 右
• オーバーフローは非表示 | 自動 | スクロール
• 表示はテーブルセル | テーブルキャプション | インラインブロックです
• 位置は絶対 | 固定

ここで親要素に overflow:auto を設定できますが、IE との互換性のためには overflow:hidden を使用するのが最適です。

しかし、この方法には欠点があります。コンテンツの一部がボックスの外に出ると、この方法では余分な部分が切り取られてしまうため、現時点では使用できません。

BFCの主な特徴:

• BFC コンテナーは他の要素に干渉しない独立したコンテナーです。そのため、2 つの要素をトリガーする BFC を使用して、垂直マージンの崩壊の問題を解決できます。
• BFCは浮動要素と重ならない
• BFC には浮動小数点数を含めることができ、これにより浮動小数点数をクリアできます。ルーチン 5: br タグ クリア フローティング

br タグには、clear という 1 つの属性があります。この属性はフロートをクリアするための強力なツールです。br タグで clear 属性を設定し、all の値を割り当てます。そうすればフロートがクリアされます。

    <div id="wrap">
      <div id="内部"></div>
      <br クリア="すべて" />
    </div>

   ＃包む {
        境界線: 1px 実線;
      }
      #内部 {
        フロート: 左;
        幅: 200ピクセル;
        高さ: 200px;
        背景: ピンク;
      }

この記事が役に立ったと思われた方は、私の GitHub ブログに「いいね！」してフォローしてください。どうぞよろしくお願いいたします。

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