overflowを設定するとボックスタイプが変わる?

カテゴリ:備忘録 2007年6月20日 17:31

なんだかよく分からない現象が発生したのでメモ。n

案件で、連続した英数字が入力された場合に、改行されずブロックが下に落ちてしまう現象が発生した。
(Firefox では問題ないが、IE では勝手にwidthを変更してしまうためfloatが崩れる)
そこで、widthは固定なのでoverflow:hiddenで横にはみ出すテキストを非表示にすることで対応した。が。n

なぜかブロック要素とも、インライン要素ともつかない変な挙動をしはじめた。
まず、内包しているインライン要素の幅が長くなると左にfloatしている要素のすぐ下、(見た目としてはfloatが落ちた感じ)になってしまった。
親要素にoverflow:hiddenを設定しているので、インライン要素がいくら横に伸びても親要素には影響ないはずだ。n

が、見る限り、そのインライン要素のせいで下に落ちてしまっている。(その長い部分を消すとちゃんと上にくる)
しかし、親要素にwidthを明示的に設定していなかったのを発見し、widthを設定してみる。n

これで問題解決か、と思いきや、今度はなぜか、設定していたmargin分、右にずれた。
しかし、本来このmarginfloatしたボックスを回避するためのもので、floatされた要素に影響されないはずである。n

にも関わらず、設定したmarginが、floatしている要素の端からの計算になっていたのだ。
(つまり、たとえば 100px の左にfloatしたボックスに対して、110px のmarginを設定すると、そのfloatしたボックスから見て右に 10px の余白ができることになる)n

しかし、実際はoverflowを設定した要素は、上の例で言えば 110px 右にずれていたのだ。
推測するに、overflowを設定すると、floatボックスとなるのではないか、と思った。
(もし、当たり前の挙動だったらコメントください;)n

float下要素を表示させる、clearfix の中に、overflowを設定して背景を表示させるテクニックもあるが、おそらく、floatボックスとなることで背景が表示されるのではないか、と思う。n

この記事のカテゴリー一覧を見る⇒備忘録

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/45