clearfixの定義、役割、使い方について

clearfixとは？

clearfixとは、floatを使ったときに生じる不具合を解消してくれるcssのプロパティのことをいう。

clearfixの役割

　では、「floatを使ったときに生じる不都合」とは、なにか？
まず、floatとは、htmlやhamlの要素を横並びにするcssのプロパティをいう。
次に、floatを使ったときに生じる不都合とは、floatを使い子要素を横並びにしたとき、子要素の上位の要素である親要素の高さ(height)や幅（weight）のプロパティが０になってしまう。それにより、ブラウザ上では、親要素が画面上から消えてしまう現象が起こる。
つまり、floatを使うことによって、親要素の高さが0になってしまうことが問題なのである。

.contents {
  background-color: gray;
  margin: 0 auto;
  width: 960px;
}

.left-content {
  background-color: red;
  float: left;
  height: 300px;
  width: 300px;
}

.right-content {
  background-color: green;
  float: right;
  height: 500px;
  width: 200px;
}

上記のコードでいうと、親要素であるcontentsが画面に反映されなくなる。

これが、floatを使ったときに生じる不都合である。これを解消するのが、clearfixである。

clearfixの使い方

では、clearfixをどう使えばよいのか？

clearfix {
    content: "";
    clear: both;
    display: block;
  }

以上のコードを親要素であるcontentsにcssプロパティとして、適用させてあげえれればよい。

つまり、上記のコードでは、以下のような記述をすればよい。

clearfix {
    content: "";
    clear: both;
    display: block;
  }

.contents {
  background-color: gray;
  margin: 0 auto;
  width: 960px;
}

.left-content {
  background-color: red;
  float: left;
  height: 300px;
  width: 300px;
}

.right-content {
  background-color: green;
  float: right;
  height: 500px;
  width: 200px;
}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 以上