SAB-webカスタマイズ

floatとは

ブログテンプレートを例にとると、
記事表示部分-サイドカラム…のように、divなどの箱が横方向(左右)に分割されて表示されている部分があります。

floatとは、左右どっちに寄せるか？という「回り込み」を指定するプロパティで、

float: left;

float: right;

float: none;(回り込みをさせない)

のように、left(左)に回り込ませる・right(右)に回り込ませる、といったようにCSS部に記述して使います。

floatに関する説明は、なんだかややこしく感じるのですが、
floatで左か右か、方向を指定しているdivやimgなどの要素は、その指定した方向に寄せられる、といったような感じです。(その後に続く要素は、指定した方向とは反対の方向に表示されます。)

floatを指定する要素にやってはいけないこと

ブログテンプレートなどには、必ずと言っていいですがfloatプロパティが使われています。
このfloatには、
「こんなことをすると、レイアウトが崩れたり不具合が起きます…！」という、
やってはいけない注意事項があります。

「別に、意図したように表示されているよ。」という場合は問題ないですが、
ブラウザ(InternetExplorerやFirefoxなど)の種類によって(各々のバージョンによっても)、 必ずしも全く同じように表示されているとは限らないので、注意が必要です。

• floatで横に並んだ要素が足して100%になってはいけない。
  98％以下になるように幅を指定する。
  ※98％を越える場合、横に並べたいのに、下に並んでしまったりする。
• floatした要素には必ず横幅(width)を指定すること。
• floatした要素にmarginやpaddingを指定してはいけない。
  InternetExplorer6では、marginやpaddingの幅を2倍に計算してしまうバグがある為。
  floatした要素にdisplay:inline;を記述するこでと回避できる。
  
  IEは"widthのサイズはpaddingとborderを含めてのサイズ"と誤認している為。
  ・paddingは一切指定せず常に0にする。
  ・borderは、borderのみで宣言させ、padding、marginを0にする。
  ・widthとmarginは一緒に指定するが、borderとpaddingは指定せず０にする。
  (2009年10月30日訂正)
• floatした要素の後に設置されている要素(上図の青い要素)に、clearをしてはいけない。
  floatは回り込みの解除(clear)を指定する必要があるが、
  floatによって回り込みをさせられている要素にclearをかけてはいけない。

clearプロパティのメモ

clear: left;(左にfloatした要素の回り込みの解除)
clear: right;(右に〃)
clear: both;(左右両方にfloatした要素の回り込みを全て解除)
clear: none;(解除をしない)

その他 画像をfloatで横に並べるとずれる

画像1つ1つにfloatを指定すると、上の図のような問題がIE6やIE7で発生する場合がある。
これを回避するには、
リストプロパティを使って、リストプロパティにfloatを指定することで回避できる。

<ul> <li><img src="画像のURI"></li> <li><img src="画像のURI"></li> <li><img src="画像のURI"></li> <li><img src="画像のURI"></li> </ul>

li {
float: left;
}