今回はいまや無くてはならない存在！？
floatについてのレシピをご紹介します。
floatとは回り込みのことです。
左、または右に寄せて配置出来ます。
　
まず



こう書いてみると、ボックスが縦に並びます。
それぞれのdivに色をつけてみると分かりやすいと思います。
ボックスAとボックスBを左右に並べて表示させたい場合はどうするのか？
という時にfloatを使います。
スタイルシートの部分に



と書くと、
ボックスAが一番左に寄って、その右隣にボックスBが配置されるようになります。
ただし、この状態だとボックスBの後に書いているボックスCも
ボックスBの右隣に回り込んでしまいます。
つまり3つとも横一列に並んでしまいます。
これを防ぐにはボックスCに解除指定のスタイルシートを記述します。


これで完璧です。

floatにはrightとleftとnoneが指定出来ます。
right→後に続く内容をその左側に回り込ませる
left→後に続く内容をその右側に回り込ませる
none→配置を指定しない、初期値
という指定になっています。
noneは初期値ですので、あまり指定する場面は無いと思います。

また、clearにはrightとleftとbothとnoneが指定できます。
clearに関しては、
right→右寄せを解除
left→左寄せを解除
none→初期値、何もしない
both→左寄せ、右寄せされた全ての回り込みを解除する
という指定になっています。
bothは右も左も両方解除してくれる、という便利な値なので
bothは絶対覚えておいて下さい。
　
floatはとても便利でもう少しお話を・・・
と思いましたが、長くなりそうなので次回にします！

ではまた次回！