floatとclear

質問

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

回答No.3

DrFell

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

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

回答No.2

ORUKA1951

質問の意味がわかりにくいのですが、
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/visuren.html#floats )

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

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

回答No.1

utun01

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

<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;というのは何ですか？