自分用のメモとして、wordpressのオリジナルテーマのリニューアルのため制作中の話ですが、floatを2回使用したところ背景画像が切れている。何度かこの問題発生したときにググって修復した記憶があるのだが、overflow:autoかhiddenで悩みまたググってしまった。
ぐぐってみるとこちらのサイト様で
詳細に説明してくださっていた。
親ボックスと子ボックス両方に
overflow: hidden;
をいれてあげると無事解決した。
有難うございました。
私は最初overflow:autoでいけるかなと考えていたが、firefoxで確認したところある一定の横幅にてスクロールバーがでてしまったので、やはりautoではなくhiddenが適切。
あとclearfixというfloatをかけたあとclearを使わないでいいという便利なタグがあります。
どちらを利用するかは、未だ議論されておりますが私はoverflow派でclearfixは使用したことが無いです。
レスポンシブ・ウェブデザイン制作では、overflowとpositionをよく使用するのでしっかりと理解して、
覚えておかなれければならいないなと自分を戒めています。
この記事へのトラックバック