Webサイトコーディングにおけるfloatの効果（その１）

先日、理解が曖昧だった点として、ナビなどで用いるdisplayの効果を確認したが、横並びのナビや複数カラムの横並びなど、デザインをコーディングに落とし込む際に使用頻度が高いと思われるfloatの効果について確認してみる。

“floatって「浮く」ってことらしいけど、浮くってどういうこと？”
“なんとなくは分かっていて、普通に使ってもいるけど、たまに挙動が理解できないことがある”
という人は少なからずいるのではないだろうか？私自身がそんな感じである。

ではさっそく、一番シンプルな例でfloatを指定した場合の表示結果を見てみよう。

単一要素に対するfloat指定の影響

一般的には横並びする必要がない単一のブロックに対してfloatを指定するということはないだろう（私の浅い経験で知る限り）と思われるが、基本的な挙動の確認として、単一ブロックレベル要素の幅や高さの指定がない場合にfloatを指定するとどのような表示結果になるのかを確認しておく。
比較のため、今回用いるコードの、floatを指定していない場合の表示結果を示す。
以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>floatの基本確認</title>
<style>
body, p{
  margin:0;
  padding:0;	
}
p {
　background-color:#CCC; /* グレー */
}
</style>
</head>
<body>
　<p>零番目</p>
</body>
</html>

表示結果は以下のようになり、幅指定がないので、幅がウィンドウサイズ一杯までとなっていることが分かる。
←クリックで大きい画像表示

では幅や高さ指定のないブロックレベル要素にfloatを指定してみるとどうなるか確認してみる。
以下、コードの変更点。

p {
　background-color:#CCC; /* グレー */
　float:left;
}

表示結果は以下のようになり、タグの中身のサイズに合うところまで幅が小さくなった。
←クリックで大きい画像表示

ここでタグの中身のサイズより大きい幅を指定するとどうなるか。
以下、コードの変更点。

p {
　background-color:#CCC; /* グレー */
　float: left;
　width: 100px;
}

表示結果は以下のようになり、指定した幅で表示された。
←クリックで大きい画像表示

念のため、タグの中身のサイズより小さい幅を指定した場合の結果も確認しておく。
以下、コードの変更点。

p {
　background-color:#CCC; /* グレー */
　float: left;
　width: 40px;
}

表示結果は以下のようになり、やはり指定した幅で表示されることが分かる。
←クリックで大きい画像表示
ここまでの結果から、以下のことが分かった。

幅指定がない場合　⇒　タグの中身（文字列など）の幅がブロックの幅として表示される
幅指定がある場合　⇒　指定した幅で表示される

複数要素に対するfloat指定の影響

続いて、複数のブロックレベル要素に対するfloat指定の影響を確認していく。
ここで今後話を進めるにあたって理解しやすいように、複数のブロックレベル要素に対してfloat指定が（一つも）ない場合の挙動を改めて確認しておく。
以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>floatの基本確認</title>
<style>
body, p{
  margin:0;
  padding:0;	
}
p#one {
  background-color:#0F0; /* 緑 */
  width:50px;
}
p#two {
  background-color:#00F; /* 青 */
  width:50px;
}
</style>
</head>
<body>
  <p id="one">一番目</p>
  <p id="two">二番目</p>
</body>
</html>

表示結果は、以下のようになり、２つのブロックが縦に並ぶことが分かる。
←クリックで大きい画像表示

これを確認したところで、同列の２つのブロックレベル要素がある場合の、一つ目のブロックレベル要素にfloatを指定した際の表示結果を見てみる。
一行加えただけだが、全コードを以下に示す。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>floatの基本確認</title>
<style>
body, p{
  margin:0;
  padding:0;	
}
p#one {
  background-color:#0F0; /* 緑 */
　float:left;
　width:50px;
}
p#two {
  background-color:#00F; /* 青 */
　width:50px;
}
</style>
</head>
<body>
  <p id="one">一番目</p>
  <p id="two">二番目</p>
</body>
</html>

さて、この結果についてだが、横並びになるものと思っている人はいないだろうか？
恥ずかしながら私はそう思っていた。
表示結果は以下のようになり、先ほどのfloat指定なしの場合の結果と変わらないように見える。
←クリックで大きい画像表示

なぜ並ばないのか？と考える人は、おそらくfloat:leftのことを“指定すれば左から順に横並びになるもの”と考えてはいないだろうか？

残念ながら、float:leftの実態はそこまで単純ではないようだ。
それを確かめるべく、上記表示結果の裏側を見てみる。

ここで、今回の訓練で知った便利な指定を紹介しておく。

　visibility:hidden;

これを指定すると、指定した要素を表示上で消す（隠す）ことができる。
これを使って先のコードで「一番目」のブロックレベル要素（pタグ）の表示を消してみる。
コードの変更点。

p#one {
  background-color:#0F0; /* 緑 */
  float:left;
  width:50px;
  visibility:hidden;
}

表示結果は以下のようになり、「一番目」のブロックレベル要素の下に「二番目」のブロックレベル要素の背景が潜り込んでいることが分かる。
←クリックで大きい画像表示

ちなみにfloat:leftを指定していない場合にvisibility:hiddenで「一番目」のブロックレベル要素を消した表示結果は以下の通り。背景が下に潜り込んでなく、floatを指定した場合と実は結果が異なっていたことが分かる。
←クリックで大きい画像表示

長くなりそうなので、ここまでを確認したところで、続きは次回とする。