float

ボックスなどを横並びで表示させたいときは、いろいろな方法がありますが、今回はCSSのfloatプロパティを使用します。今回は、下記の基本的な例を紹介します。

HTMLのleftとrightのクラスに「float: left;」を追加すると、

leftの右隣にrightが並びます。しかし、親の背景（class=”main”）が細長くなってしまいます（表示されない）

親の背景（class=”main”）が表示されない理由は、floatプロパティを指定しているボックスが浮いて、親のボックスが高さを認識できなくなり、その結果、高さによって描写領域が決まる背景が表示されないという状態になります。

ボックスやリストを横並びにしたいときに使うのがfloatプロパティです。
これは便利な反面、

  • 親ボックスからはみ出る
  • 親ボックスの背景画像が表示されなくなる

などの問題が起きてしまうことがあります。 そういった場合はfloatを解除してあげれば良いのです。解除には３つの方法が存在します。

  • 【その１】overflowプロパティ
  • 【その２】clear:bothプロパティ
  • 【その３】clearfix

それでは、上記３つを順番に説明していきます。

【その１】overflowプロパティ

mainのクラスに「overflow: hidden;」を追加する。

overflowプロパティを使うと、親要素はfloatプロパティによって浮いた子要素（leftやright）の高さを認識することができるようになります。なお、hiddenではなくautoやscrollでも効果は同じなのですが、ブラウザによってはスクロールバーが出てしまったりするので、hiddenをおすすめします。

overflow は、領域内に収まりきらない内容を、どのように処理するかを指定するプロパティです。

スタイルシート［CSS］/ボックス/ボックスからはみ出た部分の表示方法を指定する – TAG index Webサイト

これの短所

Firefox2などの一部のブラウザでは、印刷時にfloatした部分が消えてしまう場合がある。ネスケでは親要素自体が消えてしまう古いブラウザを考えなければ、短い記述で良いので大変便利です。

【その２】clear:bothプロパティ

HTMLは、divタグを追加し、「underクラス」を追加する。

CSSは、「.under」ルールを追加

clear:bothプロパティを使うと、親要素はclear:bothプロパティが適用されたdiv要素まで高さを拡張してくれます。

これの短所

タグをclear:bothだけのためにつくる事になってしまう
デザインを目的としただけのタグを入れることはあまり好ましくありません。もともとclear:bothはブロック要素でしか使うべきではない値なので、これも使うべきではないでしょう。ブロックの下に別のブロック要素を置ける状況であれば美しくfloatを解除できます。

 

【その３】clearfix

まず、これを書く。

clear:bothプロパティを使うと親要素はclear:bothプロパティが適用されたdiv要素まで高さを拡張してくれます。

HTMLはそのまま

CSSは一番下のルールを追加

clear:bothプロパティを使うと親要素はclear:bothプロパティが適用されたdiv要素まで高さを拡張してくれます。

これの長所

すべてスタイルシートで処理するので、HTMLの文章構造を損なうことなく設定することができる（HTMLに余計なタグを増やさなくてすむ）
やや古いブラウザ（ネスケ）にも対応できる

以上です。

参考