最近のブログではお馴染みのグローバルナビゲーションやページネーション、SNS ボタンなどは要素を横に並べるで実現されますが、要素を横並べにする方法として float はよく使われてきました。最近では inline-block や table-cell などが主流になりつつあるようですが、まだまだ float を使っているホームページはたくさんあります。
また、パソコン用ホームページでは定番の幅可変のレイアウトですが、これを実現するためには float は欠かすことができません。そんな便利な float ですが、これを指定した後には必ずこれを解除する必要があります。今回は float の解除方法について調べてみました。
floatプロパティとは
floatプロパティは要素を左または右に寄せるときに指定するプロパティです。float によって寄せられた要素に後続する内容は流し込まれます。ニュースサイトなどで画像のまわりに文章が流し込まれているのを見たことがあると思いますが、これは画像に float を指定したことによるものです。
この「要素をどちらかに寄せる」という操作ですが、float プロパティはこれを通常のボックスのフローから外すという方法によって実現しています。これを「浮動化」と呼びますが、親要素が子要素の大きさによって高さを決めているような場合、子要素が通常のフローから外れてしまっているため親要素の高さがなくなってしまう現象が起きることになります。
1 2 3 4 | <div id="wrapper"> <div id="main"></div> <div id="side"></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #wrapper { padding: 10px; background: #ccc; } #main { float: left; width: 60%; height: 200px; background: #FFAE35; } #side { float: right; width: 35%; height: 200px; background: #FFAE35; } |
ちょっと幅可変レイアウトを意識してみましたが、子要素の浮動化により親要素に高さが設定されずに潰れてしまっています。
また、後に続く内容が流し込まれることから、解除を忘れると思わぬ要素まで流し込まれてレイアウトが崩れることになります。当ブログでも、WordPress の「続きを読む」をカスタマイズするにあたり、この問題を取り上げたことがあります。
WordPressの「続きを読む」をスタイルシートでカスタマイズするとき注意すること | Naokix.net
解除方法その1：空のdivを使う
特別な CSS のテクニックを使わないで簡単に解決する方法は、中身がなにもない空の div を追加する方法です。
1 2 3 4 5 | <div id="wrapper"> <div id="main"></div> <div id="side"></div> <div class="clear"></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #wrapper { padding: 10px; background: #ccc; } #main { float: left; width: 60%; height: 200px; background: #FFAE35; } #side { float: right; width: 35%; height: 200px; background: #FFAE35; } .clear { clear: both; } |
この方法は簡単でわかりやすいのですが、意味のない div を追加しなければならないので、HTML の文書構造的にあまりよろしくありません。
解除方法その2：疑似要素afterを使う
要素の前後にテキストやアイコンを挿入するときに使用される疑似要素の after を使って float を解除することができます。
1 2 3 4 | <div id="wrapper"> <div id="main"></div> <div id="side"></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #wrapper { padding: 10px; background: #ccc; } #wrapper::after { content: ""; clear: both; display: block; height: 0; visibility: hidden; } #main { float: left; width: 60%; height: 200px; background: #FFAE35; } #side { float: right; width: 35%; height: 200px; background: #FFAE35; } |
これなら無意味な div を追加する必要がないので、HTML の文書構造を損なうことなく float を解除することができます。ただですね、長いんですよ。
解除方法その3：親要素にoverflowを指定する
この方法が一番シンプルだと思います。スタイルシートに一行追加するだけ。float が指定された要素の親要素に overflow の hidden を指定する方法です。
1 2 3 4 | <div id="wrapper"> <div id="main"></div> <div id="side"></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | #wrapper { padding: 10px; background: #ccc; overflow: hidden; /* この一行だけ！ */ } #main { float: left; width: 60%; height: 200px; background: #FFAE35; } #side { float: right; width: 35%; height: 200px; background: #FFAE35; } |
これで解除できました。
プログラマたるもの、シンプルであることに命を懸けねばなりません。
Comment