たった一行でclearfixを使わずにfloatを解除するテクニック備忘録

ChronoDrive さんの記事でナイスなのを発見したので忘れないうちに
記事にしておきま~す。

floatを使ったレイアウトの場合、
普通は(っていうか今まで私はそうでした ^^;)
例えば ↓

っていうhtml要素があったとするとCSSは ↓

っといったパターンですが、

下記のようにすることで clearfix を記述する必要がなくなるようです HTML↓

で CSS は ↓

floatする要素をdivで囲み、
そのdivにoverflow: hiddenを適用させるだけでOKみたいです。

今度からはこれで行こう♪

さらに、同じく ChronoDrive さんの記事で
dt要素やdd要素を横並びにするというのも発見したので
こちらも忘れないうちに ^^;

HTML ↓

CSS ↓

っというふうにすると ↓ のようなことになります

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)