基本形：floatの解除なし

先ずはfloat解除なしでやってみます。boxAとBを段組みにしてboxCを段組みなしにするイメージです。

<div class="boxA">
		（内容）
</div>
<div class="boxB">
		（内容）
</div>
<div class="boxC">
		（内容）
</div>

.boxA	{
  border: 10px solid red;
  width: 20%;
  box-sizing: border-box;
  float: left;
}

.boxB	{
  border: 10px solid blue;
  width: 80%;
  box-sizing: border-box;
  float: left;
}

	.boxC	{
  border: 10px solid green;
}

box-sizing:border-boxでborderを含めた割合にしてあります。borderやpaddingがない場合はその行はいりません。

boxAとboxBは意図通り左右に並びましたが、下のboxBが崩れてしまいました。

ではこの基本形を元に4つの方法でfloatを解除してみます。

1. 次の要素にclearプロパティ
2. 空divにclearプロパティ
3. divで囲いoverflowプロパティ
4. divで囲いclearfix（クリアフィックス）

• 各boxの中の内容は<P>タグで適当に文字を入れています。
• 見やすくするためにCSSは上記以外に多少の装飾をしています。

【1】次の要素にclearプロパティ

段組み（float）を解除する次の要素（ここではboxC）にclear:bothを追加する方法です。

.boxC	{
  border: 10px solid green;
  clear: both;
}

boxCはboxA/Bの下に並んで崩れなくなりました。

boxBの内容を増やして高さがboxAより高くなっても、boxCはその下になりました。

• 別途余分なdivを必要としません。
• 変更でboxBとCの間に別の要素を加えたり、Cを削除する場合は注意です。clear:bothを別の場所に書き換える必要があります。

【2】空divにclearプロパティ

段組み（float）を解除する位置に空のdivを追加し、clear:bothを指定する方法です。

基本形に、CSSでclear:bothのクラスを作り、HTMLでboxBの後に入れた空divに当てます。

<div class="boxA">
		（内容）
</div>
<div class="boxB">
		（内容）
</div>
<div class="clr-float"></div>
<div class="boxC">
		（内容）
</div>

.clr-float	{
  clear: both;
}

【1】同様boxCはboxA/Bの下に並んで崩れなくなりました。

• 解除する位置にclearを置くのでピンポイントでわかりやすいです。
• 記述上問題はなく好みの問題ですが、構造と無関係なdivを必要とします。

【3】divで囲いoverflowプロパティ

overflowプロパティを用いる方法です。

基本形に、HTMLでboxA/Bの外側をdivで囲い、CSSでそのdivにoverflowを指定します。わかりやすいように囲うdiv=boxDを紫枠で表します。

<div class="boxD">
<div class="boxA">
			（内容）
</div>
<div class="boxB">
			（内容）
</div>
</div>
<div class="boxC">
			（内容）
</div>

.boxD {
  border: 10px solid purple;
  overflow: auto;
}

上記同様boxCはboxA/Bの下に並んで崩れなくなりました。

• 段組み部分全体を囲むのでレイアウトしやすく、どの範囲が段組みとなっているか把握しやすいです。
• 場合によっては、overflowで指定したautoやhiddenなどのキーワードによってスクロールバーが出たりなど表示が変化します。

【4】divで囲いclearfix（クリアフィックス）

clearfix（クリアフィックス）を用いる方法です。

基本形に、HTMLでboxA/Bをdivで囲い、CSSでそのdivにclearfixを指定します。

<div class="boxD">
<div class="boxA">
			（内容）
</div>
<div class="boxB">
			（内容）
</div>
</div>
<div class="boxC">
			（内容）
</div>

.boxD {
  border: 10px solid purple;
}

.boxD:after {
  content: "";
  display: block;
  clear: both;
}

【3】同様boxCはboxA/Bの下に並んで崩れなくなりました。

• 段組み部分全体を囲むのでレイアウトしやすく、どの範囲が段組みとなっているか把握しやすいです。
• 旧verのブラウザは少し記述を加える必要がありますが、最近のものはたいていこれで問題ないようです。

float解除のまとめ

以上、4つの方法を挙げましたが、最近は4番目のclearfix（クリアフィックス）が多く使われているようです。floatをしたらいずれかの方法で解除するようにします。