CSS - float属性

レイアウト

勉強のために下記のようにdivでブロックを作り、フローレイアウトで配置してみる。普通に考えるとdiv0はそのままdiv1はfloat:left,div2はfloat:right,div3はfloat:left,div4はclear:bothでいけるはずだ。

CSSを書く

レイアウトに対応した、各div用のCSSを書いてみた結果が下記である。

HTMLは下記の通りである。

<div id="block">
<div id="div0">div0 div0div0</div>
<div id="div1">div1 div1div1</div>
<div id="div2">div2 div2div2</div>
<div id="div3">div3 div3div3</div>
<div id="div4">div4 div4div4</div>
</div>

気を付けないといけないのは各divの幅である。ボーダーに1ピクセル取るのでその分引いておかなくてはいけない。横幅がはみ出るときちんとレイアウトされない。当たり前だが。

実際の実行結果は下記となる。想定したとおりになってくれた。

floatは回り込みではない

意図したようにレイアウトできたが、実際はいろいろ試行錯誤した。floatに関して調べていると「floatは「回り込み」ではない」という記事を見つけた。引用すると、

floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。

である。そうであるとすると、今回のレイアウトではdiv2だけがfloat:rightであり、あとはnormal flowなのでfloat属性は不要なはずだ。下記のようにfloat:left属性をコメントアウトしてみる。

div 
{
  margin:0;
  padding:0;
  display:block;
}

body 
{
  background:Gray;
}

div#block
{
  background:black;
  word-wrap:break-word;
  width:150px;
  height:200px;
  border:1px dashed Brown;
}

div#div0
{
  background-color:Aqua;
  color:White;
  width:148px;
  height:48px;
  border:1px dashed;
}

div#div1
{
/*  float:left; */
  background:Green;
  color:White;
  width:73px;
  height:48px;
  border:1px dashed;

}

div#div2 
{
  float:right;
  background-color:Blue;

  color:White;
  float:right;
  width:73px;
  height:98px;
  border:1px dashed;

}

div#div3 
{
/*  float:left; */
  background-color:red;
  color:White;
  width:73px;
  height:48px;
  border:1px dashed;
}

div#div4 
{
  background-color:Orange;
  clear:both;
  color:White;
  width:148px;
  height:48px;
  border:1px dashed;
}

div#div1,div#div2,div#div3,div#div4
{
  word-wrap:inherit;
}

そのまま実行してみるとこうなる。div1の下にdiv2が右に配置されるためずれる。

いろいろ試行錯誤した結果、HTML上でdiv2をdiv1に持ってくるとうまくいった。

<div id="block">
<div id="div0">div0 div0div0</div>
<div id="div2">div2 div2div2</div>
<div id="div1">div1 div1div1</div>
<div id="div3">div3 div3div3</div>
<div id="div4">div4 div4div4</div>
</div>

理屈はまだわかっていない。規格書をじっくり読まなくてはいけないかな。