somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【CSS】メニューの横並びと回り込み解除とclearfix

横並びのメニューを作成したときの方法と問題点のメモです。

横並びのメニュー

通常縦に並ぶリストを、横並びにすることで実現しています。横並びにするために、float属性を使用します。

float属性は、その要素をその名のとおり浮かせるようなイメージだそうです。今回は浮かせて左に寄せるので、leftを指定します。

浮かせたリストの要素を左に寄せて回り込ませるので、最初に浮かせた要素の左に配置され、横並びになるイメージです。

問題点

floatで浮かせたあとの要素も浮いていることになります。そのため、リストの最後要素が、横並びメニューの最後に付加されてしまいます。

これを解決するためには、floatで浮かせたことをなかったことにする必要があります。clear: both;と記述することで解決します。

問題点2

前述のclearによって解決できますが、clearのために意味のない要素を追加する必要があります。とても気持ち悪いこの方法をCSSだけで解決する方法がclearfixです。

clearfix

詳細は、参考を参照してください。

簡単に言うと、CSSでhtml要素を加え、その要素に対してclearのスタイルを付加することでfloatを解決する方法です。

ブラウザによって、実装がまちまちなので、CSSハックというブラウザ別実装をするようです。

参考