Web標準という考え方が叫ばれるようになってだいぶ経ちますが、まだまだWeb標準を意識していないサイトは山ほどあります。Web標準へ準拠するための第一歩としては、tableタグによるレイアウトからCSSを用いたレイアウトへの移行がよく例に挙げられます。
tableタグからCSSへ移行するためのテクニックはたくさんありますが、主に段組レイアウトを実現するためのCSSのテクニックとして、floatを用いてブロック要素を左右へ寄せるという手法が一般的になりました。初期のMovable Typeに含まれていたデフォルトのテンプレートにも、このテクニックが使われていました。
ただ、この手法には問題があって、例えば以下のように、あるブロック要素内で子ブロック要素をfloatさせたとき、親ブロック要素の高さを指定していない場合に、子ブロック要素に応じて一緒に高さが伸びてくれません。
・コード
<div class="container">
<div class="left" style="width:45%;float:left;">
<p>左カラム</p>
<p>左カラム</p>
<p>左カラム</p>
<p>左カラム</p>
</div>
<div class="right" style="width:45%;float:right;">
<p>右カラム</p>
<p>右カラム.</p>
<p>右カラム</p>
</div>
</div>
・実際の見た目
左カラム
左カラム
左カラム
左カラム
右カラム
右カラム
右カラム
この問題を解決する更なるテクニックとしては、以下のように、floatさせた子ブロック要素の後ろにもう1つダミーのブロック要素を置いて、それに対してclear属性を定義するという手法が一般的です。
・コード
<div class="container">
<div class="left" style="width:45%;float:left;">
<p>左カラム</p>
<p>左カラム.</p>
<p>左カラム</p>
<p>左カラム.</p>
</div>
<div class="right" style="width:45%;float:right;">
<p>右カラム</p>
<p>右カラム</p>
<p>右カラム.</p>
</div>
<div style="clear: both">
ここにダミーのdiv要素があります。
</div>
</div>
・実際の見た目
左カラム
左カラム
左カラム
左カラム
右カラム
右カラム
右カラム
ここにダミーのdiv要素があります。
しかしこの手法は、HTMLないしXMLに手を加えて、中身はカラであるとはいえ不要なブロック要素を1つ余計に置くことになるので、苦肉の策といった感じです。そこで、よりスマートな解決法として、以下のように、親ブロック要素に対して"overflow: auto;"を定義するというテクニックがあります。
・コード
<div class="container" style="overflow: auto; width: 100%;">
<div class="left" style="width:45%;float:left;">
<p>左カラム</p>
<p>左カラム</p>
<p>左カラム</p>
<p>左カラム</p>
</div>
<div class="right" style="width:45%;float:right;">
<p>右カラム</p>
<p>右カラム</p>
<p>右カラム</p>
</div>
</div>
・実際の見た目
左カラム
左カラム
左カラム
左カラム
右カラム
右カラム
右カラム
これならば、HTMLやXMLのほうに余計なコードを追加することなく、親要素の高さを伸ばすことができます。