CSSでfloatをクリアする方法は何ですか? CSS floatクリアの4つの方法の紹介

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

説明:

利点: シンプル、コードが少なく、ブラウザとの互換性が良好。

欠点: 多数の非セマンティックな HTML 要素を追加する必要があり、コードは十分に洗練されておらず、後で保守するのは簡単ではありません。

フローティング要素をクリアするための Css メソッド 2:

CSS のオーバーフロー プロパティを使用する

CSS のコンテナーにオーバーフローを追加します。 float 要素: hidden; または overflow:auto; は、親要素のコンテナーの幅と高さを設定するか、zoom:1 を設定するなど、IE6 でトリガーする必要があります。

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

説明:

オーバーフロー属性を追加した後、浮動要素はコンテナー層に戻り、コンテナーの高さを上げ、コンテナーをクリーンアップする効果を実現します。浮遊要素。

利点: 構造的および意味論的な問題がなく、コード量が非常に少ないです。

欠点: コンテンツが増加すると、コンテンツが自動的に折り返されなくなり、問題が発生する可能性があります。コンテンツが非表示になり、オーバーフローする必要がある要素が表示されなくなります。2004 年に、POPO は、overflow:hidden によって中央ボタンが機能しなくなることを発見しました。これは、マルチタブ ブラウジング コントローラーとしては容認できません。

#フロートをクリアするための Css メソッド 3:

隣接要素の処理を使用する

何もしない、フローティング要素の後ろの要素にclear属性を追加します。

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.content{
  clear:both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

Css クリアフローティングメソッド 4:

CSS を使用:疑似要素の後に

Combined with:after pseudo-要素 (これは擬似クラスではなく、要素の後に最も近い要素を表す擬似要素であることに注意してください) と IEhack は、現在の主要な主流ブラウザーすべてと完全に互換性があります。ここでの IEhack は、hasLayout をトリガーすることを指します。

clearfix クラスをフローティング要素のコンテナに追加し、次に :after 疑似要素をこのクラスに追加して、要素の末尾に非表示のブロック要素 (Block 要素) を追加して、浮く。

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

説明: CSS疑似要素によりコンテナの内部要素の末尾に非表示のスペース「020」またはドット「.」が追加され、フロートをクリアするためのclear属性が割り当てられます。 IE6 および IE7 ブラウザの場合、haslayout をトリガーするには、zoom:1 を clearfix クラスに追加する必要があることに注意してください。

最後に: 上記の記事の一部の属性の具体的な内容については、css マニュアルを参照してください。

関連する推奨事項:

CSS_Experience 交換でフロートをクリアする一般的な方法の概要

css 禁止float のクリアを忘れる clear:both_Experienceexchange

CSS_Experienceexchange の Float (フローティング) 関連スキル記事