floatとは
- 要素を左または右に寄せて配置し、その反対側に後続の要素が回り込むようにした状態のこと
- インライン要素を含むほとんどの要素に指定できる！
- フロートの状態になると、ブロックボックスとして扱われる。
つまり、
→✔️文の流れから離れて、独立した箱になる！
→✔️もともとインライン要素でも、
ブロックのようなレイアウト挙動（幅・高さが効く、改行されるなど）になる！
ブロックレベル要素と同じなの？
🤔 ちょっと違う！
- ブロック要素ではあるけど、文の流れから除外される（＝通常のレイアウトの流れに含まれない）
- 親要素から見て、高さが計算されないこともある（＝
clearfixが必要になる場合あり）
指定できる値
-
left: 左側に寄せて配置し、その右側に後続の要素を回り込ませる -
right: 右側に寄せて配置し、その左側に後続の要素を回り込ませる -
none: フロートしていない通常の状態に戻す
サンプルコードを使って動きを理解する
サンプルコード
/*html*/
<p id="p1">
<img
src="images/sakura.png"
/>1つめの段落テキストだよ。このテキストは、横に周りこみます。このテキストは、横に周りこみます。
</p>
<p id="p2">
2つめの段落テキストだよ。このテキストは、横に周りこみます。このテキストは、横に周りこみます。
</p>
<p id="p3">
<img
src="images/sakura.png"
/>3つめの段落テキストだよ。このテキストは、横に周りこみます。このテキストは、横に周りこみます。
</p>
<p id="p4">
4つめの段落テキストだよ。このテキストは、横に周りこみます。このテキストは、横に周りこみます。
</p>
/*style*/
#p1 img {
float: right;
}
#p3 img {
float: left;
}
-
floatを設定していない状態
-
floatを設定している状態
| 段落 | 説明 |
|---|---|
#p1 |
画像が右にフロートされる → テキストは左側に回り込む |
#p2 |
普通の段落テキスト。→p1で右寄せの画像になっており、空間が空いているので下にそのまま配置され、左側に回り込む |
#p3 |
画像が左にフロートされる → テキストは右側に回り込む |
#p4 |
普通の段落テキスト。→p3で左寄せの画像になっており、空間が空いているので下にそのまま配置され、左側に回り込む |
clearプロパティ
-
floatされた要素の横に、他の要素が表示されるのを防ぐためのプロパティ - 「ここにはもう回り込まないで！下から始めて！」とブロックをかけるイメージ👊🏻
<img src="img.png" style="float: left;">
<p>← テキストが画像の横に回り込む</p>
🧐左に配置された画像の横にpタグが回り込むのをclearで防ぐことができる：
p {
clear: left;
}
claerにとれる値について
| 値 | 意味 | よく使う場面 |
|---|---|---|
none |
デフォルト。何もクリアしない（回り込み許可） | 特に設定してないとき |
left |
左側にfloatしている要素の回り込みを解除 | 左floatの画像を避けたいとき |
right |
右側にfloatしている要素の回り込みを解除 | 右floatの画像を避けたいとき |
both |
左右両方のfloatを解除（完全に下から表示） | floatされた要素の下に表示したい要素に使う |
未来の自分のために、誰かのためにこの記事が役に立てば幸いです✨🧚🏻