CSSでfloatをクリアする方法は何ですか? CSS floatクリアの4つの方法の紹介-CSSチュートリアル-php.cn

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

不言

リリース： 2018-09-14 13:37:44

オリジナル

3155 人が閲覧しました

CSS のフロートのクリアは CSS レイアウトでよく見られますが、CSS でフロートをクリアするにはどうすればよいでしょうか?この記事では、css の float をクリアする方法を紹介し、css float を使用する理由を簡単に紹介します。

前回の記事CSSフローティングとはどういう意味ですか? CSS で float をクリアする必要があるのはなぜですか? CSS フローティングを使用する理由は、CSS の一部の要素がブロックレベル要素であり、自動的に新しい行を開始するためであると

で述べました。また、次のような別のタイプのインライン要素もあります。インライン要素は前のコンテンツのまま残りますが、場合によってはこのレイアウトを変更する必要があるため、CSS フローティングを使用する必要があります。ただし、「高さ崩れ」が発生した場合は浮きを取り除く必要があります。では、CSSでfloatをクリアするにはどのような方法があるのでしょうか?

CSS で浮動小数点をクリアする 4 つの方法を見てみましょう。

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

clear 属性を持つ空の要素を使用する

フローティング要素の後に要素を使用するelement

.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 マニュアルを参照してください。