Clearfixクリアフローティングメソッドに関するCSS-CSSチュートリアル-php.cn

Clearfixクリアフローティングメソッドに関するCSS

高洛峰

リリース： 2017-03-17 16:26:10

オリジナル

1713 人が閲覧しました

まず、.clearfixとは何ですか

GoogleやBaiduで「css clear float」を検索すると、多くの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 を除く他のメソッドは、目的を達成するために新しいブロックフォーマットコンテキストを生成するだけです。どのメソッドをどのような条件で使用できるのであれば、これで十分だと思います...

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

フローティングをクリアするためのclearfixの詳細な分析

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

CSSでのclearfixとclearの使用法についての簡単な説明

最も包括的な CSS Clearfix をコンパイルしました float をクリアする方法