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

前回の確認で、以下のことが分かった。

floatを指定すると、それ以降に書かれているfloatを指定していない要素の背景が潜り込む。

しかし、まだfloat指定で横並びにならない理由は見えてこないのではないだろうか？
そこで、いろいろ変えて変化を見てみたところ、「二番目」のブロックレベル要素の幅を変えると、その値によっては横並びになる（横並びになっているように見える）ことが分かった。
「二番目」のブロックレベル要素の指定幅を70px、85px、100px、120pxと変化させたときの表示結果を以下に示す。

・指定幅70pxの表示結果
←クリックで大きい画像表示
・指定幅85pxの表示結果
←クリックで大きい画像表示
・指定幅100pxの表示結果
←クリックで大きい画像表示
・指定幅120pxの表示結果
←クリックで大きい画像表示
また、
・指定幅70px、padding-left:30pxの表示結果
←クリックで大きい画像表示
・指定幅70px、border-left:5px、margin-left:25pxの表示結果
←クリックで大きい画像表示

この結果から、以下のことが分かった。

“floatを指定した「一番目」のブロックレベル要素の幅＋「二番目」のブロックレベル要素の中身の幅”が“「二番目」のブロックレベル要素の幅”以下のとき、「二番目」のブロックレベル要素が「一番目」のブロックレベル要素の横に並んだように見える。
文字（列）は一文字ごとに横並びに移行していく。

言葉で表すと分かりにくいので、簡潔に数式で表すと、以下のようになると考えられる。
　BW1：「一番目」のブロックレベル要素の幅（margin、border、padding含む）
　CW2 ：「二番目」のブロックレベル要素の中身の幅（margin、border、padding含まない）
　BW2：「二番目」のブロックレベル要素の幅（margin、border、padding含む）　　　　　とすると、

　BW1 ＋ CW2 ≦ BW2

参考までに上記の指定幅120pxの場合の裏側を、「一番目」のブロックレベル要素にvisibility:hiddenを指定して見てみると以下のようになった。
以下、コード。

<!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;
　visibility:hidden;
}
p#two {
  background-color:#00F; /* 青 */
　width:120px;
}
</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; /* 青 */
　float:left;
　width:50px;
}
</style>
</head>
<body>
<p id="one">一番目</p>
<p id="two">二番目</p>
</body>
</html>

表示結果は以下のようになり、いくつか試した結果は割愛するが、「二番目」の幅の値に関係なく、横並びに表示される。
←クリックで大きい画像表示

こちらも参考までに「一番目」のブロックレベル要素にvisibility:hiddenを指定して裏側を見てみると、「二番目」のブロックレベル要素の背景色が「一番目」のブロックレベル要素の下に潜り込んでいないことが分かる。
←クリックで大きい画像表示

以上の結果から、floatを使った横並びの表示に関して、結果は同じように見えても本質的には以下の2通りの方法があることが分かった。

「一番目」のブロックレベル要素のみにfloat指定　⇒　「二番目」のブロックレベル要素の背景（色）が「一番目」のブロックレベル要素の下に潜り込む。「二番目」が「一番目」の横に並ぶには、幅に条件がある。
「一番目」と「二番目」のブロックレベル要素両方にfloat指定　⇒　「二番目」のブロックレベル要素の背景（色）が「一番目」のブロックレベル要素の下に潜り込まない。「二番目」が「一番目」の横に並ぶのに、幅の条件は特にない。

※参考
以下は、個人的なイメージとなるため、状況によっては必ずしもそうではないかもしれないので注意が必要。
・タグのイメージ
←クリックで大きい画像表示
・上記1の場合の条件のイメージ
←クリックで大きい画像表示
・上記1と2（2種類）の横並びのイメージ
←クリックで大きい画像表示