CSSにできること―フロートレイアウト編

CSSにできること第七弾。
今回は、floatプロパティを用いて、回り込みによってWebのレイアウトを調整する方法を書いていきます。
前作：CSSにできること―レイアウト概念編

HTMLには、imgタグの属性としてalignという値がありました。これは、画像に文章を回り込ませたいときに指定するものです。
CSSでは、float（フロート）というプロパティを使って、画像だけでなく、文章やdivボックスにも回り込みを指定することができます。

floatというプロパティは、その回り込みを指定するプロパティです。
floatのプロパティにleftを使うと、指定したボックスが左に行き、次の要素が右側に配置されます。
floatのプロパティにrightを使うと、指定したボックスが右に行き、次の要素が左側に配置されます。
そして、floatを解除したいときはclearプロパティにleftやrightなど、解除したい方向を指定します。

ややこしくて私もときどき間違えますが、慣れです。

１．文章内の回りこみ

雑誌のように、画像と文章をうまく回り込ませてレイアウトをしたい場合も、このfloatプロパティを用います。
たいていはimgタグ（画像）の方にfloatを用いることが多いです。

画像と文章の回りこみについてはあまり注意点はないのですが、問題はサイトのレイアウトに使う場合です。

２．段組レイアウト

floatを使えば、このサイトのような横に3列並ぶようなサイトも作ることができます。
（厳密に言うと、このブログはこの手法では作られていないのですが。）

ボックス1
float: left; を指定しています。

ボックス2
float: right; を指定しています。

ボックス3
float: right; を指定しています。

ボックス4
clear: both（floatのleftもrightも両方解除）; を指定しています。

まず、ボックス1はleftの指定があるので、左側に行きます。
次に、ボックス2はボックス1の右側に回りこみ、さらにrightの指定がしてあるので、一番右に行きます。
そして、ボックス3はボックス2の左側に行き、rightが指定してあるのでボックス2の右に行きます。

floatプロパティを使う際の注意としては、
まず、幅を指定すること。floatを指定したときは、必ずwidthも指定してください。

また、floatを指定していても、横に並べるボックスの幅の合計が、その外側のボックスの幅よりも大きいと、横に並ばずに下に押し出されてしまいます。
このため、前々回、widthとpaddingの微妙な関係について書きましたが、
floatを使うコンテンツにもpaddingを指定しないほうが無難です。

この他にも、ブラウザ間の表示の違いが多々あるのがフロートによるレイアウトで、
これがテーブルレイアウトを普及させてしまった要因なんだろうなといつも納得します。
（もともとサイトの段組レイアウトに使われる要素ではなかった、とも考えられますが。）

この点の微調整が、floatの難しいところです。

以上、フロートレイアウト編でした。
次回は、ポジションレイアウト編です。