３つのフロート解除方法

フロート(float)とは、回り込みを指定するプロパティです。
対象となるボックス領域を”左”あるいは”右”に寄せて、その反対側にテキストを流し込むという物です。

１. clear:both を使用しての解除


<div class="divno1">[LEFT] 吾輩は猫である<br />
夏目漱石</div>
<div class="divno2">[RIGHT]<br /> 　
吾輩（わがはい）は猫である。名前はまだ無い。<br />
.......略
</div>
<div class="both">何もfloatを指定していないボックス。普通なら一番下に表示される。</div>

解除したい部分にclass=”both”を指定する。
Clear:bothのプロパティにより回り込みを解除できます。
残念ながら、フロートプロパティが指定されている部分にこれをやっても何も変化がありません。

.divno1 {
	float: left;
	width: 40%;
	background-color: #99FFFF;
}
.divno2 {
	float: right;
	width: 40%;
	background-color: #FFCCFF;
}
/*解除CSS*/
.both {
    clear:both;
    background-color:#FFFF99
}

２. overflow:hiddenを使って解除する


<div class="overflow"> <!--これにより解除される-->
<div class="divno1">[LEFT] 吾輩は猫である<br />
夏目漱石</div>
<div class="divno2">[RIGHT]<br /> 　
吾輩（わがはい）は猫である。名前はまだ無い。<br />
.......略
</div>
</div>
<div class="none">何もfloatを指定していないボックス。普通なら一番下に表示される。</div>

私がサイトなどでよく使用している解除方法です。
３のclearfixよりもソースがごちゃごちゃしなくておすすめです。

/*解除CSS*/
.overflow {
	overflow: hidden;
	zoom: 1
}
.divno1 {
	float: left;
	width: 40%;
	background-color: #99FFFF;
}
.divno2 {
	float: right;
	width: 40%;
	background-color: #FFCCFF;
}
.none {
    background-color:#FFFF99
}

zoom:1を指定しますが、これはIE用です。

clearfixによる解除


<div class="clearfix"> <!--これにより解除される-->
<div class="divno1">[LEFT] 吾輩は猫である<br />
夏目漱石</div>
<div class="divno2">[RIGHT]<br /> 　
吾輩（わがはい）は猫である。名前はまだ無い。<br />
.......略
</div>
</div>
<div class="none">何もfloatを指定していないボックス。普通なら一番下に表示される。</div>

有名？なClearfixの解除方法です。
私はあまり使わないのでCSSコードはfloatを解除するclearfixの書き方、2種類｜web biboを参考にしました。

/*解除CSS*/
.clearfix:after {
	content:" ";
	display: block;
	height: 0px;
	clear: both;
	line-height: 0;
    font-size: 0;
	visibility: hidden;
}
.clearfix {
	zoom: 1;
}
.divno1 {
	float: left;
	width: 40%;
	background-color: #99FFFF;
}
.divno2 {
	float: right;
	width: 40%;
	background-color: #FFCCFF;
}
.none {
	background-color:#FFFF99
}

clearfixは、afterの擬似要素を使って” “をheightを０にして、visibilityで見た目だけを非表示にしてclear:bothで解除しています。
IE様にzoom:1を使用しています。
やはり一番簡単なのはOverflowを使用した解除方法ですね。
Firefox2だと印刷時におかしくなるとかあるので、Clearfixが一番無難なのかもしれません。
※たぶんどっかしらミスっているとこがあるかもしれません。

関連記事

1. 福地のデザイン　その2
2. CSS3のアニメーション
3. CSSのみで長方形の画像を正方形にする。
4. IEで背景画像を指定したinputが消えてしまう対処方法
5. 電設部 #2へいってまいりました。