CSSにおけるfloatとは
floatは、要素を左右に配置するために利用するプロパティです。このプロパティは癖があり、使用する場合いくつか注意しなければならない所があります。
又、１つの要素を左に配置する、右に配置するといった単体の要素を操作する場合は利用できますが、メニューのようないくつかの要素を均等に並べるような処理は苦手で、この場合はdisplayを利用する方が良いです。
| float値 | 説明 |
| left | 要素を左に配置する |
| right | 要素を右に配置する |
| both | floatの状態をクリアする |
| none | 指定しない（初期値） |
floatは、positionでstatic以外の値が指定されている場合には適用されないので注意が必要です。
float:left;、float:right;
float:left;又はfloat:right;を宣言することで要素が左右に配置されます。
left、rightの指定により後に続く要素は回り込みます。この性質から、以下のように画像と文字を合せたコンテンツで良く利用されます。
HTML/CSS
<div style="float:left;"><img src="./img/pic.jpg"></div>
テキストの回り込みを確認するためテキストを入力しています。～
結果
配置順序
例えばBox1、Box2があり、ともにfloat:left;を指定したとします。この場合Box1が左端に配置された上でBox1の右端にBox2が配置されます。つまり先に配置されたものから順番に左端に並んでいくということです。
段ずれの防止
例えば全体の幅が1000pxとして、これを超える幅、float:left;width:700pxとfloat:right;width:400pxと指定すると段ずれが起こります。
float:left;width:700pxとfloat:right;width:300pxとすれば段ずれは起こらない訳ですが、幅が変動するレスポンシブデザインを考慮して、30%、70%というように%で、指定するようにします。
clear:both;
left、rightを指定した後の要素が回り込まないように、つまりfloatの状態をクリアするために利用します。
ところが、clear:both;だけでは後の要素がうまく表示されません。このため以下のように親要素のafter疑似要素を作成して、以下のように記載します。これをclearfixと呼び、ますが、こんなことまでしなければならないところが、floatが使いづらい理由です。
CSS
.clearfix:after {
content: "";
clear: both;
display: block;
}
HTML
<div class="clearfix"></div>