久しぶりにclearfixにはまった話
管理しているサイトのリニューアルをしようとプロトタイプを作っていて,はまってしまいました。
それは,子要素がフロートしていると親要素の高さが出ない(ので背景も表示されない)という現象です。clearfixで検索すれば解決方法はたくさん出てくるような良く知られたことなのですが。
私の場合は,通常,「clear:bothのボックスをフロートしているボックスに続いて配置する」という設計を使ってきたので,今回新たにページを作る際にはこの問題をすっかり忘れていました。
収穫は,親要素にoverflow:hiddenで解決できるのを知ったこと。副作用はあるのでしょうか?
それは,子要素がフロートしていると親要素の高さが出ない(ので背景も表示されない)という現象です。clearfixで検索すれば解決方法はたくさん出てくるような良く知られたことなのですが。
私の場合は,通常,「clear:bothのボックスをフロートしているボックスに続いて配置する」という設計を使ってきたので,今回新たにページを作る際にはこの問題をすっかり忘れていました。
収穫は,親要素にoverflow:hiddenで解決できるのを知ったこと。副作用はあるのでしょうか?
コメント