CSSクリアフロート

CSS ヒント Clearfix

フローティングは CSS の非常に重要なレイアウト技術であり、Web ページのレイアウトで広く使用されています。ただし、親要素の高さが崩れるなど、いくつかの問題も発生します。 Clearfix テクノロジは、この問題を解決するために作成されました。この記事では、フロートをクリアする一般的な方法をいくつか紹介します。

1. 浮き上がりの問題

まず、浮き上がりの問題を理解しましょう。

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

効果は以下のようになります:

#ご覧のとおり、左サイドエリア、ライトエリアともにフローティングテクノロジーを採用。しかし、親要素 (つまり .parent) の高さを子要素の高さと同じにしたい場合、次の問題が発生します。親要素の高さが大幅に小さくなっていることがわかります。これは、子要素がフローティングを使用しているため、ドキュメント フローの外にあり、親要素に子要素が含まれていないため、高さの計算に含まれないためです。

2. float をクリアするいくつかの方法

この問題を解決するには、float をクリアして親要素に高さを再計算させる必要があります。

1. 空のラベルを使用してフロートをクリアする

これは非常に一般的な方法であり、空のラベルの特性を利用してフロートをクリアします。

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
  <div style="clear: both;"></div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

親要素の最後に空のタグを追加し、

clear:both

を設定します。タグ Clear float を示します。

しかし、この方法はさらに面倒で、意味のないタグを追加する必要があるため、コードのメンテナンスには役立ちません。

2. ::after 疑似要素を使用して浮動小数点をクリアする 最初の方法と同様に、::after 疑似要素を使用して浮動小数点をクリアします。 ::after はブロック要素であるため、float 要素の後にブロックレベルの要素を追加して、float をクリアできます。

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}

親要素で ::after 疑似要素を使用し、

content:"";display:block; を設定します。 clear :both;

は、親要素の後にブロックレベルの要素を追加し、フロートをクリアすることを意味します。

この方法では、余分な HTML タグを追加せずに、親要素に CSS スタイルを追加するだけで済むため、非常に便利です。

3. BFC を使用して float をクリアするBFC (ブロック フォーマット コンテキスト、ブロック レベルのフォーマット コンテキスト) は、独立したレンダリング領域で要素をレンダリングできるようにする CSS の概念です。 float をクリアできる場合、実装は次のとおりです。

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent {
  overflow: hidden;
}

親要素に

overflow:hidden

を設定します。このとき、フローティング要素が正しく含まれるように、親要素は BFC を形成します。

ただし、このメソッドには親要素のスタイルが変更されるため、いくつかの制限もあります。たとえば、親要素では負のマージンを設定したり、z-index 属性を設定したりすることはできません。

3. 概要この記事では、空のタグを使用してフロートをクリアする方法、::after 疑似要素を使用してフロートをクリアする方法、BFC を使用してフロートをクリアする方法など、フロートをクリアするいくつかの方法を紹介します。これらの方法はすべて実践された手法であり、プロジェクト開発に柔軟に適用して、浮きによって引き起こされる問題を解決できます。

以上がCSSクリアフロートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。