スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--)
  2. スポンサー広告
  3. このページのトップへ

結局どれをつかえばいいの?floatの解除方法を3つ比較してみる

ボックスやリストを横並びにしたい時に使うfloatプロパティ。便利な反面、「親ボックスからはみ出る」「親ボックスの背景画像が表示されなくなる」「親ボックスのマージンがなくなる」などの問題が起きてしまうことがあります。 そういった場合はfloatを解除してあげれば良いのですが、解除にはいろんな方法が存在します。そのなかで「clear:both」「clearfix」「overflow」の三つの解除方法について、それぞれの長所や短所をまとめました。




floatにはいくつかの解除方法があります

そもそも、なぜfloatの解除にいくつも方法があるのでしょうか。

それはそれぞれのプロパティがそれぞれ違う方法でfloatを解除しようとしているからです。
子要素を親要素の高さを指定しない状態で、floatを解除せずに使用すると親要素はfloatした子要素を認識することができません。
そして親要素の中には何も入っていないという判断がされるので、背景がなくなったりするといったことになるのです。
clear:bothプロパティ
clear:bothプロパティを使ってみましょう。すると親要素はclear:bothプロパティが適用されたdiv要素まで高さを拡張してくれます。

div#par_b{     /*親要素*/
     width: 300px;
     border: 1px solid;
}

div#left_b{          /*子要素*/
     float: left;
     width: 98px;          /*borderの2ピクセルを引いた値*/
     height: 200px;
     border: 1px solid;
}

div#right_b{     /*子要素*/
     float: right;
     width: 198px;     /*borderの2ピクセルを引いた値*/
     height: 200px;
     border: 1px solid;
}

div#und_b{     /*子要素*/
     width: 298px;     /*borderの2ピクセルを引いた値*/
     height: 50px;
     border: 1px solid;
     clear: both;          /*floatの解除*/
}

clearfix
次にclearfixを使ってみます。clearfixというのはクラス名であって、実際に重要なのはafterという擬似要素です。
afterは要素の直後に文字やボックスを表示できる擬似要素です。ここでは親要素の直後に高さ0の見えないボックスを表示させ、そのボックスにclear:bothを指定しています。

div:after   {
     content: "."; 
     display: block; 
     visibility: hidden; 
     height: 0.1px; 
     font-size: 0.1em; 
     line-height: 0; 
     clear: both; 
}

div { 
     display: inline-block; 
}   

ソースはclearfixの使い方 - CSS Lectureから引用してきました。
overflowプロパティ
最後にoverflowプロパティを使います。overflowはボックスに入りきらなかった画像や文字の表示を指定できるプロパティです。
これを使うと親要素はfloatされた子要素の高さを認識することができるようになります。
なお、hiddenではなくautoやscrollでも効果は同じなのですが、ブラウザによってはスクロールバーが出てしまったりするので、hiddenをおすすめします。

div#par_b{
     overflow: hidden;
     width: 300px;
     border: 1px solid;
}
3つの方法の長所と短所 ここまでで3つの解除方法の仕組みは分かってもらえたんじゃないかなと思います。では次にこれら3つの方法の長所や短所を見ていきます。


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

デザインを目的としただけのタグを入れることはあまり好ましくありません。
<br clear="both" />とすることでもfloatは解除されますが、もともとclear:bothはブロック要素でしか使うべきではない値なので、これも使うべきではないでしょう。


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


③overflow
  • Firefox2などの一部のブラウザでは、印刷時にfloatした部分が消えてしまう場合がある
  • ネスケでは親要素自体が消えてしまう

まとめ 結局どれを使うかは、内容によって臨機応変に使い分けるのが一番だと思います。
例えば①のclear:bothはfloatされたブロックの下に別のブロック要素を置ける状況であれば美しくfloatを解除できます。
③のoverflowも古いブラウザを考えなければ、短い記述で良いので大変便利です。
そして好みによってそれぞれこれは使いたくない!っていう人もいらっしゃるようなので、現時点で絶対これこれを使わないといけないという決定的な何かがあるわけでもないようです。


まとめ
  • それぞれの長所と短所を見極めて自分のレイアウトにあった方法を選ぶ
  • デザインを目的としたタグの挿入はすべきではない


参考にしたサイト


関連記事

テーマ:ホームページ作成  - ジャンル:コンピュータ

  1. 2011/04/01(金)
  2. CSS
  3. トラックバック0
  4. コメント0
  5. このページのトップへ

コメントの投稿

管理者にだけ表示を許可する

プロフィール

ikeda

Author:ikeda
出身地:滋賀県
生年月日:1994年9月3日
勉強中:WEBデザイン、プログラミング言語

現役高校生である私がWEBデザイナーを目指していく過程を書きつくります。 そのなかでWEBデザインやプログラミングに関係するハック術やTipsも紹介していきます。

最新記事

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

ブロとも申請フォーム

この人とブロともになる

QRコード

QR

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。