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 · ベストアンサー

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

お礼

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