float
回り込み
要素を左または右に寄せ、後に続く文章をその周りに回り込ませます。画像の横に文章を流し込むときに使います。
サンプルコード
実行結果
解説
float は、要素を左右どちらかに寄せ、その後に続く文章などを周りに回り込ませるプロパティです。雑誌のように画像の横に文章を流し込むレイアウトに使います。
以前は段組みのレイアウトにも使われていましたが、現在は Flexbox や Grid を使うのが一般的です。
回り込みを止めたい要素には clear: both を指定します。
応用例・注意点
指定できる値・関連
| 名前 | 説明 |
|---|---|
left / right | 左 / 右に寄せて回り込ませる |
none | 回り込みなし（初期値） |
inherit | 親要素から float プロパティの値を継承する |
clear: both | 回り込みを解除する |
display: flow-root | 親要素が float の子を包むようにする |
親要素の高さがなくなる問題を防ぐ
float した子だけの親は高さが0になります。flow-root で子を包めます。
注意点
- 01段組みのレイアウトには、float ではなく Flexbox や Grid を使います。
- 02float した要素は親の高さに含まれないため、背景や枠線がずれることがあります。
float の解除（clear・clearfix・overflow）
float の問題点
子要素すべてが float されている場合、親要素の高さがなくなってしまいます。float した要素は親の高さに数えられないためです。親の背景や枠線が子を包まなくなり、下に続く要素も回り込んでしまうので、float は解除が必要です。
例1：解除しないと親の高さがなくなる
親（薄い色の枠）の中の2つの子を左右に float すると、親の高さが 0 になり、子がはみ出します。
コードと表示の対応
.wrapper親要素です。子が2つとも float しているので、高さは padding の分しかありません。float: left; / float: right;子要素は親の枠から下にはみ出して表示されます。
解除する方法01：clear
clear は float を解除させるために使います。値は left・right・both で、float を使った直後の要素に書きます。ただし、clear した要素の margin-top は効かなくなってしまいます。
例2：直後の要素に clear: both
float した2つの後にある「ボックス1」に clear: both を書くと、回り込みが止まり、ボックス1は float した要素の下に並びます。
コードと表示の対応
.box01 { clear: both; }float した要素の直後の要素に書きます。左右どちらの float も解除するのでbothにしています。.box { margin-top: 6px; }ボックス1にも margin-top を付けていますが、clear した要素では効きません。
解除する方法02：clearfix
float をかけている要素の親要素にスタイルをかけます。::after 擬似要素で親の最後に空のブロックを作り、そこに clear: both を指定するしくみです。margin-top が効かない問題を回避できます。
例3：親の ::after で解除する（clearfix）
例1と同じHTMLに、親の .wrapper::after を足すだけで、親が子を包むようになります。
コードと表示の対応
content: "";中身が空の擬似要素を、親の最後に作ります。display: block; clear: both;その擬似要素をブロックにして float を解除するので、親が float した子の下端まで伸びます。
解除する方法03：overflow
親要素に overflow: hidden を指定する方法です。auto や scroll を設定しても解除できますが、スクロールバーが出る可能性があるため hidden で OK です。
例4：親に overflow: hidden
例1の親に overflow: hidden を1行足すだけで、親が子を包みます。
コードと表示の対応
overflow: hidden;float した子を含めた高さで親が計算され、子を包むようになります。
どれを使う？ clearfix を使うのが無難
| 方法 | 特徴・注意点 |
|---|---|
clear: both | clear: both を設定する、直後に続く要素が必要。デザインやレイアウトを目的としただけのタグを入れることは好ましくない |
| clearfix | すべてスタイルシートで処理するため、HTMLの文章構造を損なうことなく対応できる。やや古いブラウザにも対応可能 |
overflow | 一部の古いブラウザでは、印刷時に float した部分が消えてしまう場合がある。ブラウザによっては親要素自体が消えてしまうリスクも。影などはみ出た装飾も切れる |
今どきの書き方：display: flow-root
- 親に
display: flow-root;を指定しても、clearfix と同じように float した子を包めます（「応用例・注意点」の「親要素の高さがなくなる問題を防ぐ」を参照）。 - 1行で書けて余計な擬似要素も要りません。講義どおり clearfix を使っても、flow-root を使っても、どちらでも大丈夫です。
- なお、横並びのレイアウトを作るなら、そもそも float ではなく Flexbox を使うのが一般的です。