float プロパティを使用する場合はその要素の幅の明示が必要

なんかタイトルに「の」が連続してるけどいいや。

「水平方向のナビゲーションの作り方」のはてなブックマーク見て、誰も float プロパティの使い方に疑問を抱いてないのを見て不安になった。

CSS 2 の仕様書内で float プロパティ（浮動体）は以下のように書かれています。

浮動ボックスは，明示的な幅をもたなければならない。明示的な幅は，置換要素の場合は，'width'特性, 又はその組込み幅によって割り当てられる。

ここである「width 特性」と「組込み幅」とはそれぞれ以下の意味となる。

width 特性とは

スタイルシートとの width プロパティを使用すること。
ちなみに「特性」は単に「プロパティ（Property）」を和訳した単語。

組込み幅とは

仕様書内では実寸法と表記されている。

実寸法 (Intrinsic dimensions)

環境によって決まるのではなく，要素自体によって定義される幅及び高さ。 CSS2では，すべての置換要素が, そして置換要素だけが, 実寸法で現われるとする。

組込み幅の定義をもっと具体的に表すと「img 要素・object 要素の width 属性もしくは画像やオブジェクト自体の幅、input 要素・select 要素の size 属性、textarea 要素の cols 属性」がこれに相当する。

なので、画像の回り込みに以下のような記述をすることは問題ない。

img {
    float: left;
    margin-right: 10px;
}

img 要素には幅があるので、スタイルシートで幅を与えることは（意図してその画像自身の幅と異なる大きさをしたいしたい場合以外であれば）無い。

ただし、幅を持たない要素は必ず width プロパティを使用する必要がある。
ここではリストを利用しているので、そのサンプルをそのまま使わせていただくが、通常であれば以下のように指定する。

HTML サンプルソース

<ul id="navigation">
  <li>編集</li>
  <li>削除</li>
  <li>追加</li>
</ul>

スタイルシートサンプルソース

#navigation {
  list-style: none;
}

#navigation li {
  width: 2em;
  float: left;
  background: transparent url(arrow.gif) no-repeat scroll left center;
  padding-left: 12px;
  margin-right: 15px;
}

もっとも、リストにある文字数によって幅を変える場合はかなり面倒なことをしないと行けないので、やはり display: inline; を使用するのが簡単と言えば簡単ですが。

全然関係ないですが、サンプルのソース上では「追加」になっているのに表示結果の画像では「新規追加」になっているのは直した方がいいと思います。

追記 2007年7月17日 11:04

CSS 2.1 では、と言う話を受けて別途エントリしました。そちらもご確認ください

• Re: float プロパティを使用する場合はその要素の幅の明示が必要