Web制作をするうえで、要素を横並びにするために「float」を使うことは良くあると思います。
しかし、floatを使ったはいいが、floatを指定した要素に、下の要素が入りこんできた!
なんてことはないでしょうか。
<やりたい配置>
要素A 要素B 要素C (1段目はfloatで並べる)
要素D(要素Dは2段目)
<要素Dが上(1段目)に回り込んできた>
要素A 要素B 要素C 要素D
こんなイメージです。
なぜ回り込みが起きるか
HTMLの性質上、要素は上に上に詰めるようになっています。
例えば、お店に客の行列があって、前の人が行列から抜けたら、その分詰めますよね。
それと一緒です。(例え方へただな(汗))
floatを指定されると、「浮いた状態」になるということです。
次の要素は、その浮いた分詰めようとしますので、回り込みが起きるのです。
解決
回り込みをさせたくない要素に対して、
スタイルシートで、 clear:both; を設定してあげましょう。
解除の方法は他にもいろいろあるので、詳しく知りたい方はこちらもどうぞ。