CSSでフロートをクリアするにはどうすればよいですか? 3つの方法を紹介

CSS でフロートをクリアするにはどうすればよいですか?この記事では、CSSを使用してフロートをクリアする3つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

まず、フロートをクリアする必要がある理由についてはここでは説明しませんが、とにかく、フロートをクリアしないとやるべきことがたくさんあります。

以下では、float をクリアするためによく使用される 3 つの方法について説明します。これだけで十分です。

1. フローティング要素の後に空の div を追加し、フローティング要素をクリアします。

html コード:

<div class="wrap">
   <div class="float">浮动</div>
   <div class="clear"></div>
   <div class="nofloat">不想被浮动影响</div>
</div>

cssコード:

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
}

空の div が追加されましたが、float はクリアされないため、現在の影響は 3 番目の子要素である nofloat が依然として float の影響を受けます。

OK、次に、clear float を .clear に追加します:

.clear{
    clear:both;
}

エフェクトを更新すると、エフェクトが表示されます:

追記: この状況は、要素が互いのフローティングの影響を受けないように、要素を垂直に配置するのに適しています。

2. BFC 機能を使用して、フローティング

html コード:

<div class="wrap">
   <div class="float">浮动</div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css コード:

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
  overflow:hidden;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
    overflow:hidden;
}

をクリアします

効果は次のとおりです:

ここの親コンテナには高さが固定されていません。本来は、最初の子要素がフローティングになった後、親要素の高さが決まります。 2 番目の子要素の高さに折りたたまれます。子要素は同じ高さですが、2 番目の子要素と親要素の両方に overflow:hidden が設定されているため、両方とも新しい BFC 領域を生成します。BFC レイアウトによると、上記のルールにより、BFC 領域がフロート ボックスと重ならないことがわかります。BFC の高さを計算するとき、フローティング要素の高さも計算に含まれます。したがって、フロートをクリアする効果が得られます。少しわかりにくいですが、実際には、フロートのクリアは開発の実際の状況に応じて合理的に使用する必要があります。

3. 使用: 疑似要素の後に、フローティング要素の親要素のフロートをクリアします。

html コード:

<div class="wrap">
   <div class="float">浮动</div>
</div>

CSS コード:

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}

現時点では、子要素はフローティングでドキュメント フローから分離されているため、親要素は高度に折りたたまれています:

親要素が表示されます。境界線が押し込まれています。

OK、次に、clearfix クラスを親要素に追加します:

<div class="wrap clearfix">
   <div class="float">浮动</div>
</div>

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:'clear';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}

リフレッシュ後の効果は次のとおりです:

このメソッドは次のとおりです。 BFC と同じものは、フロートをクリアするために個人によってよく使用されますが、実際の開発では、実際にはこれら 2 つで十分です。

さて、ここでフロートのクリアについて簡単に説明します。

エラーがある場合は、修正するメッセージを残してください。

推奨される関連チュートリアル: CSS ビデオ チュートリアル、CSS3 ビデオ チュートリアル

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