段組(回り込み)を解除するには、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>
CSSソース
<style type="text/css">
div.blocka {
   float: left;
   width: 60%;
}
div.blockc {
   clear: both;
}
</style>
このソースを表示すると、次のような構成になります。

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

ここでは、段組を解除した後のブロック(C)に対してCSSを指定することで段組を解除しました。しかし、レイアウトによってはCのブロックに対してCSSを指定できない(したくない)場合もあります。そのような際には、clearfixなどのテクニックを使って、段組レイアウトを構成している要素に対して、「自身の直後で段組を解除する」という装飾を加える方法もあります。

段組レイアウトを解除するclearfix

「自身の直後で回り込みを解除する」テクニックには多数ありますが、例えば以下のようなCSSソースが使えます。
.blockb::after {
   content: "";
   clear: both;
   display: block;
}
ブロックBに対してこのようにCSSを指定しておけば、ブロックCには何もCSSを指定しなくても、Bの終わりで段組が解除されます。

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