こんばんは。最近こっち系の話ばかりですみません。

①overflow: hidden;
CSSのoverflowプロパティにhidden属性を付けたものです。そんなプロパティがあるんだ、くらいにしか思っていなかったのですが、どうやらこれいろいろと役立つらしいです。

とりあえずCSSでClearfix.の代わりにこれを親要素に記述しておくと、子要素をfloatさせたときに、なんと親要素がそのまま高さを保てる様子。こっちのほうが圧倒的にわかりやすいし、floatを使った際はけっこう便利です。

ところが、float自体をさせずにメニュー等を横並びにできる驚愕の方法がありました。

②display: inline-block;
これもCSSですね。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れないというもの。

TMH3.はナビゲーションをulで作ってli要素に対してfloatをかけることで横並びにさせていますが、これを使うとli要素に対して②を記述するだけで一発です。浮かせるとmargin計算とかカラム落ちとかいろいろめんどうなんですが、これで解消？少なくとも圧倒的にわかりやすいです。

というWEB業界ではわりと常識らしいことを最近知っておぢさんびっくりです。

また何か気になることがあったら追記しようとおもいますです。

ﾉｼ