ここから本文です

なぜoverflow:hiddenでfloatのレイアウト崩れが解消できるんですか? やりかたは...

the********さん

2013/3/913:30:50

なぜoverflow:hiddenでfloatのレイアウト崩れが解消できるんですか?
やりかたは分ったのですが、理論がわかりません。
おねがいします。

閲覧数:
3,252
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

ris********さん

2013/3/919:22:54

ボックスの高さは、中身から計算されます。

ところが、浮動化したボックスは、親ボックスの中身とは見なされません。だからその分、親ボックスがつぶれたようになります。

しかしながら、親ボックスの overflow が visible 以外の値であれば、その中にある浮動化ボックスも高さ計算に加える、というルールになっています(これは CSS 2.1 からのルールです)。親ボックスがスクロール領域を持つときに、中にある浮動化ボックスを無視してしまうと、かえって不自然になるからです。その結果、親ボックスは中身に浮動化ボックスがあってもつぶれません。


なお、この方法を使うときは overflow: hidden よりも overflow: auto を使うことを考えて下さい。最近、ちゃんとテストしないで overflow: hidden を濫用し、中身が隠れてしまった上にスクロールもできない、というページが増えている気がします。

質問した人からのコメント

2013/3/9 20:51:15

なるほど。
もともとそういうためのものではないけど、
賢く利用したということですね。
分かりやすい解説有難う御座いました。

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる