ホームページ > 記事 > ウェブフロントエンド > CSSフロートをクリアする方法まとめ

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

小云云オリジナル: 2018-01-20 09:25:091302ブラウズ

この記事では主にCSSフローティングを解除する3つの方法をまとめて紹介していますが、編集者がかなり良いと思ったので、参考としてシェアさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

まず、なぜ浮くのか?

なぜ浮くのか、なぜ浮遊物をクリアする必要があるのか、そしてどのように浮遊物をクリアするのか。 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 の背景色はもうだめです。要素から出たドキュメントフローが一番外側の p のスペースを占有していないため、高さも 0 になります。このとき、float をクリアし、折りたたみ効果をクリアする必要があります。親要素上の子要素のフロート。 (ここでのフロートのクリアは、子要素に以前に設定されたフロートを参照するものではないことに注意してください。第二に、これは親要素に対するフロートのクリアの影響を指します。皆さんが理解できることを願っています)。

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

1 つ目: clear:both;

親要素内にクリアのような p (box01 および box02 と同じレベル) を追加し、このクラスは、属性値clear:both;を追加することでフロートをクリアできます。以下は、フロートをクリアした後のコードと効果です。背景色が変化していることがわかります。が出てきて、親要素の高さがプラスの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;

ページがブートストラップフレームワークを使用している場合は、CSS ファイルを導入し、親要素に clearfix を追加してフロートをクリアします。これも最も一般的に使用され、最も一般的です。私のお気に入りの方法は、クラスを追加するだけですが、clear:both はページに余分な p を追加します。したがって、編集者は 3 番目の方法をすべての人に推奨します。

ページがブートストラップフレームワークを使用していない場合は、初心者が参照できるソースコードも用意されています。clearfix に疑似クラスを追加してフロートをクリアします。

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

皆さんは学びましたか？困っている友達は急いで集めてください。

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

関連記事