CSSでfloatをクリアするいくつかの方法

CSS でフロートをクリアするいくつかの方法

#CSS ではフローティング要素がよく使われるレイアウト方法ですが、フローティング要素によって親要素の高さの崩れや子要素のオーバーフローなどの問題が発生する場合もあります。フロートをクリアするメソッドを使用する必要があります。

以下では、フロートをクリアするいくつかの実用的な方法を紹介します:

1. クリア属性を使用します

クリア属性は、要素のフローティング状態を設定できます。オプション: 値:

clear: none (デフォルト値) は、要素が float をクリアしないことを意味します。
1. clear: left は、左側の浮動要素がその下で許可されないことを意味します。要素、つまり、左側のフロートがクリアされます;
2. clear: right は、その要素の下に右側のフローティング要素が許可されていないことを意味します、つまり、右側のフロートがクリアされます;
3. clear : 両方とも、要素の下にフローティング要素が許可されていないことを意味します。つまり、左右のフロートが同時にクリアされます。

例: 次のコードは、クリア フローティング効果を実装します。

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div style="clear:both;"></div>
</div>

上記のコードでは、空の div タグを最終行に追加し、そのスタイルを設定しています。clear 属性値は両方です。この要素の幅と高さは設定されていないため、単に空のラベルなので、ページ レイアウトには影響しませんが、フローティング効果は消去されます。

上記のコードを改善すると、空の div タグをクラスに抽象化できます。コードは次のとおりです:

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

上記のコードでは、height: 0; overflow: hidden を追加します。 style を介してクリア クラス ; ページ レイアウトに影響を与えないように、この空の div タグを非表示にします。

2. 疑似要素を使用する

CSS3 では、以下に示すように、疑似要素を使用してフローティング効果をクリアできます:

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

上記のコードに、Create を追加します。 clearfix クラスを使用し、疑似要素: after を使用してフローティング効果をクリアし、content: ''; display: table; および clear: Both; を設定してフローティング効果をクリアします。

3. オーバーフロー属性を使用する

以下に示すように、親要素のオーバーフロー属性を非表示、自動、また​​はスクロールに設定すると、フロートをクリアすることもできます。上記3つのスタイルの設定によりフローティングを解除できますが、フローティング要素の高さが親要素を超えるとスクロールバーが表示され、ページの美しさや使いやすさに影響します。

4. BFC (ブロックレベルの書式設定コンテキスト) を使用する

要素に BFC 属性がある場合、フローティング要素を内側にラップして、フロートをクリアする効果を実現します。 BFC は次のとおりです。 :

.parent {
  overflow: hidden;
}

.parent {
  overflow: auto;
}

.parent {
  overflow: scroll;
}

上記のコードでは、display:block; overflow:hidden; または overflow:auto; 属性を要素に設定してクリアおよびフローティングすることで、BFC 効果をトリガーします。

要約すると、実際のニーズに応じてフロートをクリアするさまざまな方法を選択し、美しく合理的なレイアウト効果を実現できます。

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