float and clear
clear は CSS のプロパティで、要素をその前にある浮動要素の下に移動 (clear) する必要があるかどうかを設定します。clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
both | 1 | 12 | 1 | 1 | 18 | 1 |
left | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
right | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りで折り返すように定義します。要素はウェブページの通常のフローから外れますが、（絶対位置指定とは異なり）フローの一部であり続けます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
left | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
right | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.float-image {
float: left;
margin: 0 1em 1em 0;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}ライブデモ
実務での使いどころ
-
画像のテキスト回り込み
記事内の画像をfloatで配置し、テキストが画像の周囲を自然に流れるレイアウトを実現します。
注意点
- フロート要素は親要素の高さ計算から外れるため、clearfixハックまたはdisplay: flow-rootで親の高さを確保してください。
アクセシビリティ
- floatによるレイアウトは視覚的な順序とDOMの順序が一致しない場合があるため、スクリーンリーダーの読み上げ順序に注意してください。