2016.04.19

Clearfixが原因でフッターの下に謎の隙間が出来る原因を解決

  • このエントリーをはてなブックマークに追加
Clearfixが原因でフッターの下に謎の隙間が出来る件を解決

最近、社内でコーディングを教えている岩渕です。

 

そこで、今まで疑問だった「clearfix」に関して、しっかり教えて上げられなかったのでめっちゃ調べました。

調べたことをアウトプットしたいと思います。

 

まず、題名にあるフッターの下に謎の隙間が出来る原因を解決します。

 

フッターの下に謎の隙間を解決

下記のようなclearfixが定番だと思います。

 

隙間が出来る原因は、content内のピリオドが原因です。

Content内のピリオドを隙間に変更して下さい。

 

contentに隙間を入れて変更(コピペでいけます。)

 

じゃあなぜ、擬似要素をつくるのに、そもそもピリオドだったのか?

それは、【Netscape】というブラウザに対応させるためです。

なので、ピリオドから隙間に変更させると【Netscape】ではcontentは認識されず擬似要素として成立しません。

 

【Netscape】にもちゃんと対応させたい方は、小さい透明の画像を作って入れましょう。

 

例: 横1px縦1pxの透明画像作成 → toumei.png

画像名とディレクトリを一緒にすれば、コピペでいけますよ。

 

上記で謎の隙間は解決できますが、もう少し詳しくclearixに関して説明します。

 

clearfixってなんなの?

僕は最近まで、floatを解除するためだけに使っており、具体的な意味を全く知りませんでした。

 

説明資料として、2カラムのレイアウトを用意しました。

clearfixの説明資料1

 

HTML

 

sideInnerには、float:leftを、mainInnerには、float:rightをcssで付与しています。

親の要素には、clearfixを付与しています。

 

それでは、clearfixを外してみるとどのようなレイアウトになるでしょうか。

 

答えは下記のようになります。

clearfixの説明資料2

 

フッターがサイドとメインの後ろにいますね。

 

どういう状況になっているの?

floatという性質は、単純に左や右に回りこむだけでなく要素が浮いた状態になります。

英語訳でfloatは「浮く」という意味です。

言葉の通りですね。

 

浮いている状態だから、フッターはサイドとメインをすり抜けてヘッダーの下まで来てしまうのです。

 

要するに、親要素の<section id=”allInner”></section>は、サイドとメインが浮いている状態のため、高さが取れていないのです。

 

じゃあclearfixってどういう働きをしているの?

簡単に言うと、Floatをかけた要素に対して、高さを認識させる手助けをしているのです。

 

どういうことかというと、下記の画像を見て下さい。

clearfixの説明資料3

 

サイドとメインの親要素である

<section id=”allInner” class=”clearfix”></section>

の後(clearfix::after)に擬似要素(content: “ ”)を追加しているのです。

 

それに加え、floatの要素を両方解除しているので(clear:both)高さを認識できるようになっているのです。

 

Clearfixのプロパティ/値を1個1個解説します。

 

まとめ

今回調べたことによって、clearfixに対して非常に理解が深まりました。

Html、css初心者の方は、少し難しいかもしれませんね。

はじめは、なんとなく使ってるだけで良いと思います。

 

なんとなく使ってても全く不便しませんw

この記事を書いた人

岩渕 裕プロデューサー

筋トレ、ランニング、料理、ザイグル(家焼き肉)、サイクリング、動画制作が趣味です。健康第一。

  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績