フロートのクリアについて

質問

フロートのクリアについて

下記のように設定しているのですが、<p class="mp0" style="clear:both; "></p>でフロートをクリアしています。
このやり方以外でフロートを解除する方法はあるでしょうか？
（dlの中でpを使うのはあまり良くない？ようなので）

.blocks　にclear:bothを設定しても、dl全体の高さが認識されないようで、ボーダーがボックスの下にきてくれません。

ちなみに、class"mp0"となっているのは下で記載はしていませんがマージンとパディングを0に設定しています。

<div id="special_area">

<p class="mp0"><img src="*****"></p>

<dl class="blocks">
<dt class="blocks_ico"><a href="#"><img src="***"></a></dt>
<dd class="blocks_text">
<p class="blocks_catch"><a href="#">あああ</a></p>
<p class="blocks_title"><a href="#">いいい</a></p>
　 <p class="blocks_com"><a href="#">ううう</a></p>
<p class="blocks_go"><a href="#"><img src="***"></a></p>
</dd>
<p class="mp0" style="clear:both; "></p>
</dl><!-- blocks -->

<dl class="blocks">
<dt class="blocks_ico"><a href="#"><img src="***"></a></dt>
<dd class="blocks_text">
<p class="blocks_catch"><a href="#">かかか</a></p>
<p class="blocks_title"><a href="#">ききき</a></p>
　 <p class="blocks_com"><a href="#">くくく</a></p>
<p class="blocks_go"><a href="#"><img src="***"></a></p>
</dd>
<p class="mp0" style="clear:both; "></p>
</dl><!-- blocks -->

</div><!-- special end -->

css

#special_area{
float:right;
width:390px;
}
.blocks{
padding:15px 20px;
border-bottom:dotted 1px #bbb;
}
.blocks_ico{
float:left;
width:85px;
height:85px;
padding:0;
}
.blocks_text{
float:right;
margin:0;
width:250px;
}
.blocks_catch{
margin:0;
line-height:1.2;
font-weight:bold;
color:#333;
}
.blocks_title{
margin:0;
font-weight:bold;
font-size:160%;
font-size:16px;
color:#333;
}
.blocks_com{
margin:3px 0;
line-height:1.1;
color:#333;
}
.blocks_go{
margin:0;
}

回答No.3

metametamu · ベストアンサー

まず、<p class="mp0" style="clear:both; "></p>ですが位置的に絶対に書けません。これはアウトです。
dl要素をせっかく使っているので、

<dl>
<dt></dt>
<dd></dd>
</dl>

<dl>
<dt></dt>
<dd></dd>
</dl>

とするのではなく

<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

としましょう。
こうすればpの代わりの位置に丁度dtがきます。
なので、dtにclearを指定します。
dlにborder-bottomを指定されているので代わりにddにborder-bottomを指定されるとよいと思います。

蛇足ですが、dl要素はあくまで定義リストなのでdtの内の画像にはalt属性が必要だと思います。
もしかしたらdl要素ではなく、単純にul要素だったりh1～h6とp要素だけでマークアップする方が最適なマークアップなんじゃないでしょうか。

お礼

ありがとうございます。非常に参考になりました！

回答No.2

fujillin

clearfix をキーにぐぐってみれば吉かも。

回答No.1

rurino

自分の場合ですが、普段は

<br class="clr" />
(外部CSS：.clr { clear: both; })

を使っています。