float をクリアするための最も包括的な CSS Clearfix メソッド-CSSチュートリアル-php.cn

float をクリアするための最も包括的な CSS Clearfix メソッド

PHPz

リリース： 2017-03-17 16:25:55

オリジナル

4434 人が閲覧しました

Clearfix は、Float をクリアするために CSS でよく使用されます。著者は、clearfix を使用するいくつかの異なる方法を比較のためにリストしています。必要な場合は、Float をクリアするための CSS Clearfix メソッドを参照してください。(なぜ CSS は float をクリアする必要があるのですか?はフロートをクリアする原理です)

まず、.clearfix とは何ですか

Google や Baidu で「CSS フロートをクリアする」を検索するだけで、多くの Web サイトで「ボックスがいつ削除されるか」について説明していることがわかります。内部フロートをクリアします。「.clearfix」を使用できます。

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}<p class="clearfix">
  <p class="floated"></p>
</p>

ログイン後にコピー

上記のコードは .clearfix の定義と適用です。

1 の原理について簡単に説明します。IE6 および 7 では、zoom: 1 が hasLayout をトリガーし、それによって要素の内部フロートが閉じられます。

2. 標準ブラウザでは、.clearfix:after 疑似クラスは、.clearfix に適用された要素の後に、clear: Both ブロックレベル要素を挿入し、それによって float をクリアします。

<p>
  <p class="floated"></p>
</p>
<p style="clear: both"></p>

ログイン後にコピー

二番目に、.clearfix の欠点

上記のコードでわかるように、IE6 と 7 を除いて、.clearfix は標準ブラウザーで Clear: Both 要素を挿入します。これにより、不要なフロートの削除が行われる可能性があります。例で説明すると:

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
    html, body { padding: 0; margin: 0; }
    ul { margin: 0; padding: 0; } 
  
    .clearfix:after {
      content: " ";
      display: block;
      clear: both;
      height: 0;
    }
    .clearfix {
      zoom: 1;
    }
  
    .left-col {
      background: red;      float: left;
      width: 100px;
      height: 300px;
    }
    .right-col {
      margin-left: 100px;
    }
    .menu {
      border: 1px solid #000;
    }
    .menu li {      float: left;
      display: block;
      padding: 0 1em;
      margin: 0 1em 0 0;
      background: #ccc;
    }
    .placeholder {
      background: yellow;
      height: 400px;
    }  </style>
</head>
<body>
  <p class="left-col">
  </p>
  <p class="right-col">
    <ul class="menu">
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </ul>
    <p class="placeholder"></p>
  </p>
</body>
</html>

ログイン後にコピー

上記のコードは 2 列のレイアウトページを構成します。 .menu メニューには境界線がありますが、.menu の li 要素が左にフローティングしているため、.menu には高さがなく、.clearfix を使用して .menu 内のフローティングコンテンツをクリアできることに注意してください。コードは次のとおりです:

<ul class="menu clearfix">
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
</ul>

ログイン後にコピー

しかし、.clearfix を適用すると、標準ブラウザではページが非常に汚くなります。これは、.clearfix:after が .left-col の float もクリアするためです。

3. .clearfix を再構築します

上記のエラーが発生した後、.clearfix:after 以外に要素内の float をクリアする方法があるかどうかを分析します。答えは「はい」です。「現地語のブロックフォーマットコンテキスト」の記事では、ブロックフォーマットコンテキストを構成する要素が内部要素のフローティングをクリアできると述べられています。次に、.clearfix をブロックフォーマットコンテキストとして作成します。ブロックフォーマットコンテキストを構成するにはいくつかの方法があります:

float の値は none ではありません。
オーバーフローの値は表示されません。
displayの値はtable-cell、table-caption、inline-blockのいずれかです。
位置の値は相対的でも静的でもありません。

明らかに、float とposition は私たちのニーズには適していません。その場合、オーバーフローまたはディスプレイから 1 つだけを選択できます。 .clearfix および .menu で適用されるメニューはマルチレベルである可能性が非常に高いため、overflow: hidden または overflow: auto はニーズを満たしていません (ドロップダウンメニューが非表示になるか、スクロールバーが表示されます)。表示のみを使用します。アクションを実行します。

.clearfixのdisplay値はtable-cell、table-caption、inline-blockのいずれかに設定できますが、display:inline-blockは余分な空白が生じるのでこれも除外します。残っているのは table-cell と table-caption だけです。display: table は匿名ボックスの 1 つを生成するため、display: table を使用して .clearfix をブロックフォーマットコンテキストにできます。 (表示値はテーブルセル) はブロックフォーマットコンテキストを形成します。このようにして、新しい .clearfix は内部要素のフロートを閉じます。以下はリファクタリング後の .clearfix です。

.clearfix {
  zoom: 1;
  display: table;
  width: 100%;
}

ログイン後にコピー

4、概要

IE6 および 7 では、hasLayout をトリガーする要素が内部フロートをクリアできる限り。標準ブラウザで要素の内部フロートをクリアする方法は数多くありますが、.clearfix:after を除く他のメソッドは、目的を達成するために新しいブロックフォーマットコンテキストを生成するだけです。どのメソッドをどのような条件で使用できるのであれば、これで十分だと思います...

フロートをクリアするCSSのclearfixメソッドに関するその他の関連記事については、PHP中国語のWebサイトに注目してください

In -フロートをクリアするためのclearfixの深度分析

CSSでのclearfixの使用法を深く理解する

CSSでのclearfixとclearの使用法について簡単に紹介します

フロートをクリアするためのCSSでのclearfixについて