CSSレイアウト崩れの原因 - 回り込み解除(clear)の指定忘れ

clear指定を忘れもCSSレイアウトを崩す大きな原因。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSレイアウト崩れの原因 - 回り込み解除(clear)の指定忘れ

CSSレイアウトは、「float」というプロパティを指定し、DIVタグを左右に寄せることで配置するものですが、この「float」を解除しないと、左右に寄せたDIVタグの後に記載したものが上位のDIVタグに回りこんでしまい、崩れを生じさせます。

floatを解除忘れによるレイアウトの崩れ

右のイラストは、floatを解除しなかったことによる崩れの例です。

少々分かりにくいのですが、本来であればページ最下部にくるべきフッター(コピーライト表示)部分が、floatの解除がないためそのままメインスペース部分に回りこみ、サイドバーの直下に表示されてしまっています。

このようにならないよう、floatを解除するためのプロパティが「clear」です。回り込ませたくない部分のセレクタに「clear:both」と記載することで、回り込みが回避されちゃんと下に表示されるようになります。

clear用のセレクタを用意しておくのもひとつの方法です。

[HTML上の記載]

<div class="clear"><hr /></div>

[CSSの記載]

.clear { clear:both; }
.clear hr { display:none; }

「clearセレクタが指定された部分でfloatを解除します。clearセレクタが指定されたタグの中にあるhrタグは非表示にします。」という指定です。これなら、回り込みを解除したことをHTML上で確認でき分かりやすいですし、ブラウザ上でも目立ちません。

どのような方法を取るにせよ、floatさせた後でclearすることで回り込みを解除することができますので、CSSでレイアウトする際は、必ず指定するようにしましょう。