2016-08-03

floatが済んだらとりあえずclear:bothしておく

はじめに

webサイトを作成する上でおそらく欠かせない「float」のプロパティですが、私があまりfloatの動作を理解しないで使用していた時にぶつかった問題がfloat後の要素の挙動でした。今回はいくつか例を挙げて、挙動と対処法を見ていきたいと思います。

floatをしていない場合

まず、一切floatを使用していない場合。この場合はそのまま縦に要素が並びます。

CSS
画面表示
floatなし

一つ目の要素だけfloatする

次に、div1にのみfloatを適用します。

CSS

すると、下のようにdiv2がdiv1の下に潜り込んでしまい、レイアウトがぐちゃぐちゃに。

画面表示
div1要素をfloat

これに対処する場合に、「clear: both」をdiv2に適用します。

CSS
画面表示
div1要素をclear

すると、div1のfloatが保たれたままレイアウトが整えられます。

二つ目の要素までfloatする場合

次に、div1とdiv2の二つをfloatする場合です。同じ方向にfloatすることで、要素を複数横並びにすることが出来ますが、今度はdiv3がdiv1の下に潜りこんでしまいます。

CSS
画面表示
div2までfloat

これに対処するために今度はdiv3に対して「clear: both」を適用します。

CSS
画面表示
div2要素をclear

三つ目の要素までfloatする場合

では、三つすべての要素をfloatするとどうなるかというと、こうなります。

CSS
画面表示
div3までfloat

これは、子要素のfloatによって親要素の高さが0になるという(仕様なのかはわかりませんが)現象らしく、親要素に背景などを設定していた場合、表示されなくなってしまうなどの不具合が生じてしまいます。こちらへの対処としては、footerなどのさらに下の要素でclearするか、以下のように親要素に「overflow: hidden」を適用することで対処することが出来ます。

CSS
画面表示
wrapperをoverflow

ただし、この場合はoverflowを適用する親要素にheightを指定していると、子要素がheight以上の大きさだった場合、heightを過剰した部分は不可視になってしまうので注意が必要です。

CSS
画面表示
wrapperにheightが指定してある場合

さいごに

clearの他にもfloat後の挙動への対処方法はいくつかあるようですが、とりあえずは同列の要素に対しては「clear: both」を、親要素に対しては「overflow: hidden」を指定しておけば大丈夫なように思います。



コメントする(※は必須項目です)













画像認証