※注意：floatプロパティは、近年あまり使用されなくなりました。
したがって、実践としてではなく知識として知っておいて損はないというレベルで学びましょう。
floatとは？
float（浮動化）プロパティは、コンテンツの回り込みに使われるプロパティです。
以下の様に使用します。
{float:left or right or none;}leftを指定すると、指定した要素を左側に寄せます。
そして、後に続くコンテンツはその右側に回り込みます。
rightを指定すると、指定した要素を右側に寄せます。
そして、のちに続くコンテンツはその左側に回り込みます。
noneを指定すると、回り込みの解除です。noneが初期値となります。
floatを指定すると「浮動化」する
実際に動かしてみましょう。「box1」と「box2」を「contents」で囲っています。
使用例：HTML
<div class="contents">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>使用例：CSS
.contents{
width:100%;
background:#CCC;
}
.box1{
width:100px;
height:100px;
background:red;
}
.box2{
width:100px;
height:100px;
background:blue;
}使用例：ブラウザ
では、「box1」にfloat:leftを適用させます。
使用例：CSS
.box1{
width:100px;
height:100px;
background:red;
float:left;
}
使用例：ブラウザ
box2が見えなくなってしまいました。なぜ、このようになってしまうのでしょうか？
それは、floatが適用されると要素は「浮動化」つまり「浮いている状態」になってしまう為です。もう少し分かりやすくしてみます。
分かりやすくするためにbox2の大きさを変えてみます。
使用例：ブラウザ
重なっているのが分かります。
先程、文字がはみ出していたのは同じサイズのコンテンツが重なることで文字のスペースがなくなった為です。
これを解決するためには、box2にもfloatを適用させます。
使用例：CSS
.box2{
width:100px;
height:100px;
background:blue;
float:left;
}使用例：ブラウザ
しかし、今度は枠からはみ出してしまいました。さらに背景色までなくなっています。
floatを適用した要素の親要素は高さが0になる!?
実は、floatを適用した要素の親要素、つまりこの場合「contents」ボックスは、ブロック要素ですが、高さが0になってしまいます。
これは、floatを適用した要素は「浮いている状態」の為、親要素ではこの値を無視してしまうのです。
つまり親要素「contents」ボックスの中身は「何もない状態」となり、高さが0になってしまいます。
この状態を解除するためには、「clearプロパティ」を使用する必要があります。
floatの解除
clearプロパティは以下の様に使用します。
{clear: left or right or both;}bothというのは、両方という意味です。基本的には、この「both」を使用することが多いです。
しかし、ここで1つ問題があります。
それは、「どの要素で解除するのか」です。floatを解除したい要素がある場合には問題ないのですが、今回のように下に他の要素が無い場合、「clearプロパティ」を使用できる要素がありません。このような場合の解除方法はいくつかありますので紹介します。
空のdivを使用する
「他の要素が無いのであれば、中身が何も無い要素を作ってしまえば問題ない！」という考えです。以下の様にします。
<div style="clear:both;"></div>これを解除したいところに入れればfloatを解除できます。
しかし、このやり方は現在は非推奨です。HTML文書内において、意味のない要素は検索結果においてマイナスです。
clearfixで解除
clearfixというのはcssのテクニックの１つで、疑似要素を使った方法です。floatを適用させた要素の「親要素」に、以下のcssを適用させます。
ちなみに、clearfixというクラス名は任意の名前でも問題ありません。
使用例：CSS
.clearfix::after {
content: "";
display: table;
clear: both;
}詳しい内容の解説はここでは省きますが、先ほどの空の要素をcssで作っているようなものだと理解しましょう。
その他にも解除方法はありますが、今回はclearfixを利用して解除しましょう。「contents」に適用させます。
使用例：HTML
<div class="contents clearfix">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>使用例：CSS
.clearfix::after {
content: "";
display: table;
clear: both;
}使用例：ブラウザ
これで、floatを解除することができました。
floatは癖があり、Webサイト制作において天敵とも呼べるほどレイアウトが崩れる原因になることが多いプロパティです。
今後は、利用頻度が少なくなることが予想されます。
理解するポイントまとめ
- float（浮動化）プロパティは、コンテンツの回り込みに使われるプロパティです。
- floatを指定すると「浮動化」する
- floatを適用した要素の親要素は高さが0になる。
- floatはclearfixで解除しよう。