HTML説明1

はてなのプロフィールみたいな定義リストのCSS

ソースを解読したところ、

dl {
margin-bottom:0px;
}

dl dt {
font-weight:bold;
color:#333333;
padding:1px 0px;
float:left;
text-align:left;
width:150px;
margin:0px 0px 4px 0px;
}

dl dd {
position:relative;
padding:1px 0px;
margin:0px 0px 4px 0px;
margin-left:150px;
}

の部分だと分かりました。
で、やってみたところ、レイアウトが崩れることがあることが分かりました。というわけで、必ず崩れないようにするために、

clear:left;

を

float:left;

の前に入れる、つまり

dl dt {
font-weight:bold;
color:#333333;
padding:1px 0px;
clear:left; /*フロート無効化*/
float:left; /*フロート適用*/
text-align:left;
width:150px;
margin:0px 0px 4px 0px;
}

こうすることで、一度フロートをリセットして再びフロートすることで、レイアウトが崩れなくなります。

これはこのブログにも使われています。

ハイ、誰得&グダグダの説明でした。