感がとってもありますが、「clearfix」について備忘録です。毎回”ウェブで調べて分かった気になっている”シリーズになっているので、一度しっかり整理してちゃんと身に着ける意味で記事を書きました。そもそもclearfixって何なん?って方は、いらっしゃらないかと思いますが、一応念のため。clearfixはfloatというプロパティを使用した際に使うCSSですので、floatとワンセットで覚えることが多いです。floatって何なん?ウェブのコーディングをする方で、floatを知らない方もいないかと思いますが、念のため。floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。後に続く内容は、その反対側に回り込みます。-CSSリファレンスより引用つまり画像やブロック要素に対して、要素を右や左へ回り込ませるプロパティとなります。こんな感じでAとBの要素があるとします。htmlの構造上、縦に要素は配置されます。それを横に並べたい場合はfloatプロパティを使用します。Aの要素に{float:left;}を使ってみます。すると、こんな感じでBの要素が右へ回り込みます。これがfloatプロパティの効果です。ご覧の通りfloatはとても便利ですし、デザインを組む上でなくてはならないプロパティです。このプロパティはとても影響力があるので、こちらが意図していない要素まで右回りにしてしまうことが多々あります!例えば、さきほどの例の場合、その下にフッターがあるとします。この状態でうっかり先ほどのようにfloatをかけてしまうと、あららら~超フロート状態になってしまいます。フッターまでフロートしちゃって、浮きまくりなレイアウトですよね。