CSS - float属性

公開:2011-10-17 17:26
更新:2020-02-15 04:36
カテゴリ:web,css

きょうは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ピクセル取るのでその分引いておかなくてはいけない。横幅がはみ出るときちんとレイアウトされない。当たり前だが。

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

div0 div0div0
div1 div1div1
div2 div2div2
div3 div3div3
div4 div4div4

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>

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