floatとclear

ボックスが３つあって、一つ目にfloa rightをし、２つ目にfloat leftをして、３つ目のボックスでfloatを解除する場合、clearはleftだけでいいですか？ rightは２つ目のfloat leftで解除されていますか？

No.1 回答者： utun01 回答日時： 2012/03/28 17:23

例えば以下の様にした場合、

<style type="text/css">
.test1{float: right;}
.test2{float: left;}
.test3{float: clear;}
</style>
<div class='test1'>test1</div>
<div class='test2'>test2</div>
<div class='test3'>test3</div>
<div>test4</div>

以下の様に表示されます。
test2 test3 test1
test4

clearはそれのみを定義した要素を一つ埋め込むのが普通ですので、
clearのみを定義した空のdivとかを使います。
ちなみに、clearはそれが現れた時点で適用されているfloatを全て解除するので
leftとかrightとかを気にする必要はありません。

この回答への補足

float: clear;というのは何ですか？

補足日時：2012/03/28 18:50

No.2 回答者： ORUKA1951 回答日時： 2012/03/28 19:44

質問の意味がわかりにくいのですが、

float:left;
と指定すると、それに続く要素は右側に回りこまされます。flat:right;はその逆です。次にclearプロパティで、解除されない限りfloatは有効です。
　folatを解除するプロパティはclearですが、その値は、right|left|both|none|inheritの５つです。
★9.5 浮動体（Floats） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　両方を解除するためには、clear:both;です。

　なお、『CSSでレイアウト - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7376273.html )』でも書きましたが、出来ればボックスの配置にfloatは使わないほうが良いと思います。floatさせるために、本来の文書構造を変則的なものに変えることになったら本末転倒ですし、そもそも記事内でfloatが使えない----。

No.3 回答者： DrFell 回答日時： 2012/03/28 19:45

clear:leftだと左だけ

clear:rightだと右だけ
clear:bothだと両方とも
です。

したがって、3つ目のボックスでfloatを解除したいなら、clear:bothとします。