floatを他の要素に頼らず解除する
- 2007/12/18(火) 18:34
- Web
- Add comments
トップの更新情報5件の下から全ての更新履歴を表示するページへのリンクをつけました。
ついでに更新情報一覧ページの表示を変えました。タイトルとサムネイルだけ表示します。
更新情報に加えておこうかと思ったけどたいした変更でもないしやめておきます。
その変更した更新履歴一覧ページの表示で使っている、タイトルの「floatを他の要素に頼らず解除する」方法についてです。
アサノさんのサイト、「Mushline」でこういう感じな表示をなさっていて、これってどうやってるんだろーとCSSを覗いてみてこのコードにどえらく感動しました。
.metadata dl:after{
display: block;
height: 0px;
clear: both;
content: "";
}
要素をfloatさせたあとって、どの要素でそのfloatを解除させようかいつも考えるところだったんですが、:afterで解決する方法とか考えもつかなかったです。擬似的にブロック要素を作ってそこでfloat解除するんですね。スゴイ!
IEには効かないんですが、IEはもともとfloatされていようが何だろうか中に入っているもののが入るサイズを勝手に計算してくれるやつなのでまあいいとしよう。paddingの影響も受けてくれるともっといいのに…。


