2行で終わるclearfix

CSS, 備忘録

clearfixについて

このエントリーでは僕が業務で使用しているclearfixについてちょろっと書いてみたいと思います。
色々見てみましたが他の方の記事にはなかったようなので・・・(近しいのはありましたが)
CSSを始めて、誰もが困る表示を解決してくれるclearfix。
基本を知っている方でも、この方法は知らない方も居そうなので是非興味がある方はご覧下さい。

clearfixって何?

と思う方は以下のリンクを読んで見てください。

では詳細は続きから。

一般的なclearfix

一般的に知られているclearfixは2通りあるかと思います。

content:” “;型

Coliss様より引用/* new clearfix */
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:” “;
clear:both;
height:0;
}
* html .clearfix{zoom:1;}/* IE6 */
*:first-child+html .clearfix{zoom:1;}/* IE7 */

というような「content:””;」などを用いる形が一番一般的かと思います。
これは昔からあるやり方ですね。
個人的にはclassとして使わないと若干長ったらしいのがちょっと気になります。

overflow:hidden;型

CSS HappyLife様より引用#main .section{
overflow:hidden;
}
* html #main .section{
height:1%;
}

これはoverflow:hidden;を使うと子要素の高さ分、親要素がその高さになるという性質を利用しているものになります。(原文どこだか忘れました…)
僕が主に使っているのはこちらの方のclearfixなのですが、ちょろっと変えて使っています。

というわけでやっとですが2行で終わるclearfix


サンプルはこちら#contents{
overflow:hidden;/* モダンブラウザ */
_zoom:1;/* IE6以下 */
}

以上です。どうです簡単ですね!
有効なブラウザは、IEは5.5からと古すぎないVerのモダンブラウザ(Firefox,Safari,Chrome,Opera)です。

ちなみに「_プロパティ:値;」という様にアンダーバーをつけるとIE6以下に適用されるハックになります。
この書き方が嫌いな人は「_zoom:1;」の部分を「* html」ハックにして、以下の様にして頂くしかないですが…
#contents{
overflow:hidden;
}
* html #contents{
zoom:1;
}

個人的にはアンダーバーを使用する場合が多いです。
validな方と戦うつもりはありませんが、自分は仕事でソースを記述するときには、お客様がキチンと見れて、運用する際にも楽に出来るほうを選ぶようにしています。
ですがソースが汚いじゃないか!と思う方はvalidな書き方にして頂いてよいと思います。
※ちなみに余談ですが、「*プロパティ:値;」とすると、IE7以下に有効なハックとなります。余談です。

overflow:hidden;系を使う上での注意点

注意として、overflow:hidden;を使っていて、その要素内でposition:absolute;を使ってウィンドウの様なものを表示させようとすると、隠れてしまうという致命的な欠点があります。
某ページで使おうとした場合
※Firebugでソースをいじって、NGな例を再現した画像です。
その場合は、従来のclearfixを使ってもらったほうが良いかとは思います…がこの条件に当てはまらない場合はどんどん使ってよいかと思います。

まとめ

というわけでまとめです。
ちなみに、classにしないで対応する場合の手法を明記します。classにしたい方は書き換えて使えばよいかと思います。

大体の場合

以下のソースを使ってclearfixを適用します。
#contents{
overflow:hidden;/* モダンブラウザ */
_zoom:1;/* IE6以下 */
}

例外の場合

上記にあるように、要素内でposition:absolute;を使ってウィンドウなどを表示させたい場合は、スタイルシートをめぐる冒険: clearfixの決定版を作る -モダンブラウザ編-様が一番良いとしているケースを応用して

#contents:after{
content:””;
display:block;
clear:both;
}
#contents{
_zoom:1;/* IE6以下 */
}

とするのが無難だと考えられます。
自分はこの手法で問題は起きていないですが、問題が起きた方はご連絡いただければ対応方法を考えたいと思います(判れば…)

2011年2月23日追記 匿名さんよりご指摘

ページをまたぐようなセクション/ブロックに、この方法を用いると印刷時にセクション/ブロックごと強制改ページが発生するケースがあります。
ユーザー視点では見た目どおりの印刷が求められるケースが多いため、念のためご注意を。

とのことなので、印刷時には指定の仕方を注意する必要がありそうですね。。

12 Comments »

  1. 記事書きました! 2行で終わるclearfix | kzms2 – html,css,javascript http://bit.ly/63ei8e

    トラックバック by ずま/Zuma — 2009/12/28 月曜日 @ 1:16:38

  2. clearfixってこれでいいんだ・・・ http://kzms2.com/2009/12/28/easy_clearfix/

    トラックバック by HolyGrail/堀 邦明 — 2010/1/6 水曜日 @ 3:08:33

  3. ちょっとびっくり RT: @HolyGrail: clearfixってこれでいいんだ・・・ http://kzms2.com/2009/12/28/easy_clearfix/

    トラックバック by マイカタ — 2010/1/6 水曜日 @ 3:13:32

  4. まじっすか。早速今使ってみるのだ
    RT @HolyGrail: clearfixってこれでいいんだ・・・ http://bit.ly/5U8YqT

    トラックバック by iwaH — 2010/1/6 水曜日 @ 3:36:00

  5. スゲー。行数がグッと抑えられる http://bit.ly/4rPWp8

    トラックバック by nrtknst — 2010/1/6 水曜日 @ 4:39:45

  6. 2行で終わるclearfix | kzms2 – html,css,javascript http://bit.ly/8M1yWO

    トラックバック by javascriptstories — 2010/1/6 水曜日 @ 4:49:05

  7. ブクマなう 2行で終わるclearfix | kzms2 – html,css,javascript: ちょうどいいエントリー http://bit.ly/8VtkoO

    トラックバック by tanarky — 2010/1/6 水曜日 @ 4:59:17

  8. RT @tanarky: ブクマなう 2行で終わるclearfix | kzms2 – html,css,javascript: ちょうどいいエントリー http://bit.ly/8VtkoO

    トラックバック by javascript: — 2010/1/6 水曜日 @ 5:07:32

  9. ほぉー RT @HolyGrail: clearfixってこれでいいんだ・・・ http://kzms2.com/2009/12/28/easy_clearfix/

    トラックバック by dasahiko okama — 2010/1/6 水曜日 @ 5:24:54

  10. 2行で終わるclearfix | kzms2 – html,css,javascript http://kzms2.com/2009/12/28/easy_clearfix/

    トラックバック by webdesignStatio. — 2010/5/7 金曜日 @ 11:40:24

  11. ページをまたぐようなセクション/ブロックに、この方法を用いると印刷時にセクション/ブロックごと強制改ページが発生するケースがあります。
    ユーザー視点では見た目どおりの印刷が求められるケースが多いため、念のためご注意を。

    Comment by 匿名 — 2011/1/19 水曜日 @ 11:00:40

  12. >>匿名さん
    返信が遅れてすみません!
    確かに印刷のときの事を含めるとそうなってしまいますね…
    注記を増やしておきますね。ありがとうございます。

    Comment by ずま/kzms2 — 2011/2/23 水曜日 @ 22:22:15

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • 読み込みエラーです。しばらく経ってから確認してみてください。

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。