【初心者向け】clearfixが効かない場合の原因と対処法をご紹介!

【初心者向け】clearfixが効かない場合の原因と対処法をご紹介!

「clearfix」はfloatを使ってHTMLで横並びのレイアウトを作った際にfloatを解除する目的で使われます。しかし開発をしていてこのclearfixが効かないという場合があります。今回はclearfixが効かない場合の原因と対処法についてまとめました。


目次[非表示]

  1. HTMLでclearfixが効かない場合
  2. HTMLでclearfixが効かない場合の原因と対処法

HTMLでclearfixが効かない場合

clearfixとは?

HTMLで横並びレイアウトでfloatを使っている際に、あわせてclearfix(クリアフィックス)を使うケースが多いです。

下記のサンプルコードでは左・右と横並びのレイアウトをfloatを使って実現していて、その親要素(緑の領域)の算出のために、clearfixというクラスを利用しています。

clearfixとは何か、使い方についてはぜひ下記の記事を参考にしてみて下さい。

floatを解除するclearfixの使い方・書き方を簡単に紹介!

CSSのfloatを使うことで横並びのレイアウトが出来ますが、floatを使うとデザインが崩れ思い通りにいかない事があります。その問題はclearfixを使うことで対処することが出来ます。clearfixとは何か、使い方・書き方について紹介していきます。

Thumb

clearfixが効かない?

さて、flaotを解除して、親要素の高さの算出ができるようになるclearfixのテクニックですが、HTML初心者の方が利用していて、clearfixが効かないという場合があります。

今回はclearfixが効かない場合に考えられる原因をあげて、対処法をご紹介していきます。

HTMLでclearfixが効かない場合の原因と対処法

クラス名が間違っている

clearfixというクラス名を作成したいところで「cleaafix」など誤字でクラス名が間違っている場合や、CSSのスタイル定義で「.cleafix」でセレクタを定義すべきところを「#clearfix」などid指定の書き方を間違えてしている場合があります。

例えば下記のサンプルコードではclearfixのクラス名を間違えていて、clearfixが効いていない例になります。

クラス名があっているか再度確認してみましょう。

HTMLで閉じタグなどが無い

HTMLの閉じタグ忘れで、clearfixが上手く効いていない場合があります。ATOMなどHTMLの開発サポート機能が豊富で、閉じタグ忘れがないかチェックしてくれるエディターを使っている場合は、あまりないケースですが、今一度HTMLの閉じタグ忘れや誤字脱字などを確認しましょう。

ちなみに下記のサイトでは閉じタグ忘れのチェックがすぐに出来ますので、早くチェックしたい方におすすめです。

DirtyMarkup

DirtyMarkupの使い方は簡単で、チェックしたいHTMLをコピペで貼り付けるだけです。エラーがある場合は赤く表示されます。

また左側の「Clean」のボタンを押すことで閉じタグ忘れなどを直したコードを返してくれます。

DirtyMarkupの使用例

CSSが間違っている

CSS側で文法エラーがおきている場合もclearfixが効かなくなります。CSSがちゃんと書かれているか今一度チェックしてみましょう。

初心者でありがちなのは

  • id・classを間違えている
  • 末尾のセミコロンを忘れている
  • 記号が全角で記述されている
などです。ぜひチェックしてみましょう。

CSSで関係ないスタイルが効いている

CSSで記述が問題ないというう場合は、clearfixがあたっている要素で別のスタイルが効いていて、それが悪さしている場合があります。

例えば下記の例を見てみましょう。

「position: absolute」が右・左の要素に効いており、その影響で親要素の高さが算出できていません。

このように別のスタイルがあたっていないかチェックをしてみましょう。

ディベロッパーツールでチェックしよう

ChromeのデベロッパーツールでCSSのチェックが行なえます。

  • Windowsであれば「Ctrl + Shift  + I」
  • Macであれば「Command + Shift + I」
のショートカットで開けます。

デベロッパーツールが開いたら「Elements」のタブでHTML
デベロッパーツールが開いたら「Elements」のタブでHTMLを見れます。カーソルをタグにあてていくと、右側にそのタグで適用されているCSSが見れます。

ここで想定どおりのCSSがちゃんと効いているかチェックしましょう。

デベロッパーツールを使うとHTMLやCSSの大抵のミスに気づけるので、ぜひ試してみましょう。

ブラウザのバージョンが対応していない

こちらは今ではかなりレアケースですが、clearfixの書き方によっては特定のブラウザでは効かないケースがあります。

ただし最近のclearfixの書き方では、現在モダンとなっているブラウザで有効なので、もしこのケースだとしたらマイナーなブラウザやかなり古いブラウザの場合があります。

ぜひclearfixが効かない場合はまず別のブラウザでも効かないのかチェックしてみて、別のブラウザで効いている場合はブラウザ固有の問題の可能性となります。