段組(回り込み)を解除するには「clearプロパティ」を使う

下図のような構成を作りたい場合は、「ブロックC」の直前で段組を解除する必要があります。そうしないと、「ブロックBの高さ」が「ブロックAの高さ」よりも低かった場合に、「ブロックC」の内容が「ブロックA」の右側に回り込んでしまうからです。

(「段組の解除」が必要なレイアウト例)


段組の解除(正確には「回り込みの解除」)には、clearプロパティを使います。clearプロパティの仕様は、以下の通りです。

clearプロパティ
機能: 回り込みの解除
値: both = 左右両側の回り込みを解除
left = 左端に配置されたブロックに対する回り込みを解除
right = 右端に配置されたブロックに対する回り込みを解除
none = 回り込みを解除しない(標準)
備考: とりあえず both を指定しておけば、すべての回り込みを解除できます。

書き方は簡単です。例えば、次のように記述します。
<style type="text/css">
div.clearblock {
   clear: both;
}
</style>
これで、このスタイルを適用した要素の直前で、すべての回り込みが解除(=段組が解除)されます。以下に、使用例もご紹介しておきます。

HTML部分
<div class="blocka">
   コンテンツA
</div>
<div class="blockb">
   コンテンツB
</div>
<div class="blockc">
   コンテンツC
</div>
スタイルシート部分
<style type="text/css">
div.blocka {
   float: left;
   width: 60%;
}
div.blockc {
   clear: both;
}
</style>
このソースを表示すると、次のような構成になります。

(「段組の解除」が必要なレイアウト例)


さて、最後に、今回ご紹介した方法とは別の段組作成方法についても、簡単にご紹介しておきます。