clear

Home>CSS>プロパティリファレンス>clear

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

clearプロパティの役割

clearプロパティは、floatプロパティによってフロート指定された要素に続く要素の回り込みを解除します。

clearプロパティに設定できる値

both フロートをすべて解除。
left 左フロートを解除。
none 解除なし。初期値。
right 右フロートを解除。

clearプロパティの使い方

<div style="float:left;width:50px;height:50px;background-color:#FF0000">&nbsp;</div>
<div style="float:left;width:50px;height:50px;background-color:#0000ff">&nbsp;</div>
<div style="clear:both;;width:50px;height:50px;background-color:#ff00ff">&nbsp;</div>

 
 
 

上のサンプルは、赤と青とピンクのボックスがあり、赤と青にはfloat:leftを指定することで、横並びにしています。ピンクのボックスはclear:bothを指定して回り込みを解除しているので、横に並ばずに下に表示されています。

関連リンク

よく読まれている記事

UpDate:2010-7-24