CSSのfloatの回り込み解除について

現在は、<dt>にfloat:leftを指定して、.clearを作成し、<div class="clear"></div>で解除しています。

ただ最近floatを頻繁に使うようになり、<div class="clear">が多くなってしまいどうにかならないか探しているところです。

私がやりたい事は、<dl>に直接clear属性を付属できないかです。
これができれば、回り込み解除の指定がいらなくなるので、助かるのですが、<dl>に入れると、<dt>のfloatも解除されてしまいます。

下記がサンプルソースです。


CSS：
dl {clear:both;}
dt {float:left;width:130px;border:solid 1px #CCC;}

HTML
<dl>
<dt>SAMPLE</dt>
<dt>SAMPLE</dt>
<dt>SAMPLE</dt>
</dl>
<p>clearを設置しなくても回り込み解除</p>


これが理想です。
やはり、clearは別で設置しなければならないんでしょうか？

No.1 ベストアンサー 回答者： naokita 回答日時： 2011/01/28 02:45

dl:after {

height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
dt {float:left;width:130px;border:solid 1px #CCC;}

この回答へのお礼

ありがとうございます。
解決しました。
擬似要素があるとは全く知りませんでした。
奥が深いですね。

お礼日時：2011/01/28 10:24