CSS float/clear ジェネレーター

CSS floatとclearプロパティのコードを生成。フロートレイアウトの制御とclearfix実装をサポート。

float プロパティ

左にフロート

clear プロパティ

両側のフロートをクリア

clearfix パターンを含める

フロート要素の親要素に適用するクラシックなclearfixテクニック

生成されたCSS

.float-element {
  float: left;
}

.clear-element {
  clear: both;
}

float と clear の動作を視覚的に確認

float: left

フロート要素

このテキストは通常のフローにあります。フロート要素がleftまたはrightの場合、このテキストはフロート要素の横に回り込みます。フロート要素がnoneの場合は回り込みません。

clear: both

左フロート

右フロート

clear: both を適用した要素

CSS float と clear について

float プロパティは、要素を通常のフローから取り出し、左または右に配置します。他のコンテンツはフロート要素の周りに回り込みます。

clear プロパティは、フロート要素の影響を解除し、指定した側のフロート要素の下に要素を移動させます。clear: both は、左右両方のフロートをクリアします。

Clearfix は、フロート要素を含む親要素が高さを持つようにするための古典的なテクニックです。モダンな開発では Flexbox や Grid の使用が推奨されますが、レガシーコードのメンテナンスや特定のレイアウトニーズには依然として有用です。