floatを使って要素を横並びにする

今回はfloatプロパティを使用して、要素を横並びにする方法について解説していきます。

横並びにする方法としては他にもdisplay: flexを使用するものもありますが、こちらの記事では従来型の(CSS3ではない)floatを使用した方法でお伝えします。

最近学習し始めた方も、忘れてしまった方も、理解しやすいように話していきますね。

要素を横並びにする

floatで横並びにするものとして、よく使用するのは、headerのナビゲーションが挙げられると思います。

こんな感じですね↓

 

floatを使用したら解除が必要

floatを使用すると、そのプロパティの性質上、かけた要素の高さがなくなってしまいます。そのため、floatをかけた際は必ずそれを解除することを忘れないよう注意してください。

floatの解除の仕方としては次の3つのパターンがあります。

  1. divの空要素をhtmlに組み込む
  2. 親タグにclearfixをかける
  3. 次の要素にclear:bothをかける

では、それぞれについて見ていきましょう。

divの空要素をhtmlに組み込む

これはいつ使うのかと言うと、例えば2カラムのサイトを作るとき、メインコンテンツとサイドナビを横並びにする場合に使えます。

ただし、divの横並びの場合は良いですが、ナビゲーションなどでliタグを横並びにする場合は注意が必要です。

なぜなら文法上のルールとして、ulの中に入れてよいのはliタグのみであって、divタグは入れてはいけないことになっているからです。

そんな時はどうすればよいのかと言うと、次にお伝えするclearfixを使用する方法があります

親タグにclearfixをかける

横並びにしたいタグをくるむ、親タグにclearfixをかけます。

clearfixのcssは検索してみて、こちらが使えそうなので、こちらを引用します。このままコピペして、clearfixをかけたいhtmiタグにクラスを追記していきます。

【追記:2020/5/4】
いや、むしろ下に追記したリセットCSSのソースをコピペして使用した方が、楽だと思うので下記を参考にしてくださいませ。

もしくは、リセットCSS内に次のような記述がある場合、htmlに”cf”というクラス名を追加するとfloatを解除できるようになります。便利ですね!

.cf:after{
content: “.”;
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

これで、liタグにdivタグを続けなくて済みます。つまり文法エラーを出さなくて済みます。

次の要素にclear:bothをかける

最後は、floatをかけた次の要素にclear: both;をかけると言うものです。
例えばmainやasideタグに続くものにfooterがあると思いますが、そのfooterにclear: bothをかけます。

ソースは次のようになります。

上記のcssでfloatの”浮き”が解除できるわけですね。

まとめ

floatを使って横並びにする方法についてお伝えしました。

横並びにするには単にfloatを使用すればいいだけでなく、floatの”浮き”を解除するclear: both、あるいはclearfixを使用しなければなりません。

その方法は下記の通りでした。

  1. divの空要素をhtmlに組み込む
  2. 親タグにclearfixをかける
  3. 次の要素にclear:bothをかける

いくつか覚えておくと、適宜使っているhtmlソースに応じて、使い分けができるので便利でしょう。

ご参考までに!