なんだかよく分からない現象が発生したのでメモ。
案件で、連続した英数字が入力された場合に、改行されずブロックが下に落ちてしまう現象が発生した。
(Firefoxでは問題ないが、IEでは勝手にwidthを変更してしまうためfloatが崩れる)
そこで、widthは固定なので
overflow:hiddenで横にはみ出すテキストを非表示にすることで対応した。が。
なぜかブロック要素とも、インライン要素ともつかない変な挙動をしはじめた。
まず、内包しているインライン要素の幅が長くなると左にfloatしている要素のすぐ下、(見た目としてはfloatが落ちた感じ)になってしまった。
親要素に
overflow:hiddenを設定しているので、インライン要素がいくら横に伸びても親要素には影響ないはずだ。
が、見る限り、そのインライン要素のせいで下に落ちてしまっている。(その長い部分を消すとちゃんと上にくる)
しかし、親要素にwidthを明示的に設定していなかったのを発見し、widthを設定してみる。
これで問題解決か、と思いきや、今度はなぜか、設定していたmargin分、右にずれた。
しかし、本来このmarginはfloatしたボックスを回避するためのもので、floatされた要素に影響されないはずである。
にも関わらず、設定したmarginが、floatしている要素の端からの計算になっていたのだ。
(つまり、たとえば100pxの左にfloatしたボックスに対して、110pxのmarginを設定すると、そのfloatしたボックスから見て右に10pxの余白ができることになる)
しかし、実際はoverflowを設定した要素は、上の例で言えば110px右にずれていたのだ。
推測するに、overflowを設定すると、floatボックスとなるのではないか、と思った。
(もし、当たり前の挙動だったらコメントください;)
float下要素を表示させる、clearfixの中に、overflowを設定して背景を表示させるテクニックもあるが、おそらく、floatボックスとなることで背景が表示されるのではないか、と思う。