CSSフロートをクリアする方法

今回はCSSフローティングをクリアする方法と、CSSフローティングをクリアするための注意事項についてお届けします。以下は実際的なケースです。

まず、なぜフロートするのか

なぜフロートするのか、なぜフロートをクリアする必要があるのか​​、そしてフロートをクリアする方法について説明します。 Web ページをレイアウトするときに、要素を並べて表示する必要がある場合があります。フローティングが選択されていない場合、それらのブロック要素は 1 行ずつ表示され、スペースを占有し、ユーザー エクスペリエンスが非常に悪くなります。

以下はフローティングなしの要素コードです

​​

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
    </p>
 .box{
    background: #000;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
}

写真1-1はフローティングなしの要素、写真1-2は外側のコンテナの幅と高さであり、この目的は後述します

要素に float を追加すると、図 1-3 に示すように、レイアウトが変更され、2 つの p が並べて表示されます。すごいですね(笑)

しかし、背景色が変わっていることに気づきましたか。 p の最外層の要素の高さも 0 になります。このとき、要素の外にあるドキュメント フローは最外層 p のスペースを占有していないため、float をクリアし、子の折りたたみ効果をクリアする必要があります。親要素上の要素のフロート。 (ここでのフロートのクリアは、子要素に以前に設定されたフロートを参照するものではないことに注意してください。第二に、これは親要素に対するフロートのクリアの影響を指します。皆さんが理解できることを願っています)。

2 フロートをクリアするには 3 つの方法があります:

1 つ目: clear:both;

親要素内にクリアのような p (box01 および box02 と同じレベル) を追加し、これは、float をクリアするクラスに属性値 clear: Both; を追加します。以下は、図 1-3 に示すように、float をクリアした後のコードと効果です。が出てきて、親要素の高さはちょうど100pxです。これは子要素によって開かれています。

2 番目のタイプ: overflow: hidden;

次の CSS コードに示すように、親要素に overflow: hidden を追加することもできますが、この方法も推奨されません。余分な部分を隠すことを意味します。適切に処理しないと、ページに問題が発生する可能性があります。

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
   .box{
    background: #000;
}
.clear{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

3 番目の方法: clearfix;

ページが

bootstrap

フレームワークを使用している場合は、CSS ファイルを導入し、親要素に clearfix を追加してフロートをクリアします。これは、日常の作業で最もよく使用される方法でもあります。プログラマーの間で最も人気のある方法は、単にクラスを追加することですが、clear:both はページに追加の p を追加します。したがって、編集者は 3 番目の方法をすべての人に推奨します。 ページがブートストラップ フレームワークを使用していない場合は、初心者が参照できるソース コードも用意されています。clearfix に疑似クラスを追加してフロートをクリアします。

.box{
        background: #000;
        overflow: hidden;
    }

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

h5 は、複数画像のプレビューのアップロードとクリックしてドラッグするコントロールを実装します

S5 ではレイヤードスクリーンを適応させることができます

以上がCSSフロートをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。