webデザイナーのメモ

幅広い知識があるwebデザイナーになりたいです

全体表示

[ リスト ]

clearfixとは

■clearfixとは

●float と 親要素の関係

・親要素の中のfloatさせた要素の量が多いと通常は回り込みをして、
 親要素の高さはキープできるが
 
→floatした要素の量が、極端に少ないと
 親要素の高さから無視されてしまい、量が多くて下にあふれてしまう。
 
 ◎なので全体の高さがキープされない。

 私はこれのおかげで、親要素に指定した背景画像とその周りのボーダーが
 下まで、表示されず、かっこ悪い有様になりました。(泣)


 ★つまり、floatによって右または左に配置された要素は、
 親要素の高さから無視されるわけです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

★そこで、clearを使うわけですがclearを使うには、要素が必要です。

 clearfixがでてくる以前は、無駄な空要素を作りfloatを解除していました。
 しかし見た目だけに使い、文字列に意味がなくあまりよい方法ではありません。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

・親ボックスが要素全体を含むように変えるためのCSSハックのことが
 clearfixなのです。

・親ボックスが全体を覆うようにするとfloatした要素は
 親ボックスからはみでません。

1.after擬似要素とcontentプロパテイを利用して、中のfloatした要素の後ろに
 インラインボックスを生成。
2.display:block;で親要素の幅に広がるブロック要素に変換。
3.clearプロパテイで、フロート解除。
 という3つで構成されています。
  
 また、visibility: hidden;で、不要な.(.は追加した本来不要なテキスト)を
 表示させていません。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

●clearfix


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

● clearfix 使い方

★classやidの属性の値をclearfixのセレクタ部分に指定する。

.wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrapper {display: inline-block;}
/* Hides from IE-mac \*/
* html .wrapper {height: 1%;}
.wrapper {display: block;}
/* End hide from IE-mac */


・こんな感じに.clearfixの部分を .wrapper に変更してみました。
 4ケ所変更しました。

★親ボックスに既に指定されているクラス名で置き換えて使用します。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

●clearfixはIE5、IE6、mac版IEに対応しておりません。

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}←WIN IE6以前対策 ホーリーハック

.clearfix {display: inline-block;}← IE7とmac版IE5対策。

.clearfix {display: block;}←mac版 IE5以外向けの指定。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

◎追加 入れ子にしていくと clearfixが増えてコードが肥大しますよね。
そういう時はグループセレクタを使い、カンマ区切りでやるとコードがすっきりします。

(例) 

div#contents:after,
div#footer:after,
content: ".";
(以下、省略・・)

この記事に

閉じる コメント(1)

顔アイコン

駆け出しのものです。
clearfixの意味が分かりました!
ありがとうございます^^ 削除

2009/6/6(土) 午後 10:43 [ ふらっと ] 返信する

コメント投稿

顔アイコン

顔アイコン・表示画像の選択

名前パスワードブログ
絵文字
×
  • オリジナル
  • SoftBank1
  • SoftBank2
  • SoftBank3
  • SoftBank4
  • docomo1
  • docomo2
  • au1
  • au2
  • au3
  • au4
投稿

.


みんなの更新記事