clear:both;で回り込みを解除

ホーム > お知らせ&トピックス > CSS > clear:both;で回り込みを解除

2009-03-11 | CSS

clearプロパティはfloatプロパティで左寄せ、或いは右に寄せられた要素の回り込み解除に使うプロパティです。値は以下のとおりleft、right、both、noneとありますが通常使用するのはボス、bothです。
CSSにて段組みレイアウトを実現させる際には必要不可欠なfloatと同様必要不可欠なプロパティです。このclearがないと一旦回り込み指定を受けたボックスは延々と回り込み続けレイアウトを大きく崩します。

この回避にはfloat指示された直下のボックスには必ずclear指示を与える、またはあるボックス内部で完結させる、というようにしています。

例1
<div id="sampleBOX">
　<div lass="left">左に回りこみ </div>
　<div lass="left">左に回りこみ </div>
</div>

例2
<div lass="left">左に回りこみ </div>
<div lass="left">左に回りこみ </div>
<div lass="sampleBOX> </div>

css
#sampleBOX{clear:both;}
.left{float:left;}

一般的に見出しとなるh2やh3には回り込みは不要と考えていますので、共通内容記述のcommon.cssにてh1,h2,h3{clear:both;}という基本設定をしています。これにより回り込みによるレイアウト崩れの防止になります。

＜clearプロパティの値＞
left ・・・左寄せされた要素に対する回り込みを解除。
right ・・・右寄せされた要素に対する回り込みを解除。
both ・・・全ての要素に対する回り込みを解除。
none ・・・デフォルト。回り込みを解除せず。

▲ページの先頭へ

まずはお気軽にご相談ください。