夢は小さいほどいいと思っているんです。本気になれるから。

夢を持つことが大事なんじゃなく、本気になるのが大事。(糸井重里)

cssのfloatを解除する方法 〜あこがれの2カラムレイアウト〜

http://hiroshinakazato.com/wp/wp-content/uploads/2014/01/example03.gif
画像引用: CSSプロパティ / float,clear...

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

HTML

<div class="main">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

CSS

.main {
  padding: 10px;
  width: 1000px;
  background: #aaa;
}

.left {
  width: 600px;
  height: 200px;
  background: #6FB0CC;
}

.right {
  width: 300px;
  height: 200px;
  background: #ABD16C;
}

実行結果
f:id:pbrsk:20160207232944p:plain

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

.main {
  padding: 10px;
  width: 1000px;
  background: #aaa;
}

.left {
  float: left;/*これを追加*/
  width: 600px;
  height: 200px;
  background: #6FB0CC;
}

.right {
  float: left;/*これを追加*/
  width: 300px;
  height: 200px;
  background: #ABD16C;
}

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

実行結果
f:id:pbrsk:20160207233046p:plain

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

f:id:pbrsk:20160131230755j:plain
画像引用元:結局どれをつかえばいいの?floatの解除方法を3つ比較してみる これからWEBデザイナーを目指す高校生のブログ


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

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

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

  • 【その1】overflowプロパティ
  • 【その2】clear:bothプロパティ
  • 【その3】clearfix

順番に説明していきます。

【その1】overflowプロパティ

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

.main {
  padding: 10px;
  width: 1000px;
  background: #aaa;
  overflow: hidden;/*これを追加*/
}

.left {
  float: left;
  width: 600px;
  height: 200px;
  background: #6FB0CC;
}

.right {
  float: left;
  width: 300px;
  height: 200px;
  background: #ABD16C;
}

実行結果
f:id:pbrsk:20160207232333p:plain

f:id:pbrsk:20160131233019p:plain
画像引用元:結局どれをつかえばいいの?floatの解除方法を3つ比較してみる これからWEBデザイナーを目指す高校生のブログ


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

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

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

これの短所

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

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

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

<div class="main">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="under">under</div><!-- これを追加 -->
</div>

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

.main {
  padding: 10px;
  width: 1000px;
  background: #aaa;
  overflow: hidden;
}

.left {
  float: left;
  width: 600px;
  height: 200px;
  background: #6FB0CC;
}

.right {
  float: left;
  width: 300px;
  height: 200px;
  background: #ABD16C;
}

/*これを追加*/
.under {
  clear: both;
}

実行結果
f:id:pbrsk:20160207233334p:plain

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

f:id:pbrsk:20160203001056p:plain
画像引用元:結局どれをつかえばいいの?floatの解除方法を3つ比較してみる これからWEBデザイナーを目指す高校生のブログ

これの短所

タグをclear:bothだけのためにつくる事になってしまう

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

【その3】clearfix

まず、これを書く
HTML

<div class="main">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div>under</div><!-- これを追加 -->

CSS

.main {
  padding: 10px;
  width: 1000px;
  background: #aaa;
}

.left {
  float: left;
  width: 600px;
  height: 200px;
  background: #6FB0CC;
}

.right {
  float: left;
  width: 300px;
  height: 200px;
  background: #ABD16C;
}

実行結果
f:id:pbrsk:20160207233944p:plain

親要素が、子要素の高さを認識できなくなりました。そこで。

HTMLはそのまま

<div class="main">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

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

.main {
  padding: 10px;
  width: 1000px;
  background: #aaa;
}

.left {
  float: left;
  width: 600px;
  height: 200px;
  background: #6FB0CC;
}

.right {
  float: left;
  width: 300px;
  height: 200px;
  background: #ABD16C;
}

/*これを追加*/
.main:after {
  content: '';
  display: table;
  clear: both;
}

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

実行結果
f:id:pbrsk:20160207234048p:plain

f:id:pbrsk:20160203004142p:plain
画像引用元:結局どれをつかえばいいの?floatの解除方法を3つ比較してみる これからWEBデザイナーを目指す高校生のブログ

これの長所

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

以上です。