Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

clearfixとは?

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

clearfixの役割

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

                                          以上

okamoto_ryo
2019年4月から本格的にプログラムを勉強している文系大学4年生です。主にHTML/CSS/JavaScript/jQuery/Ruby/Ruby on Railsを勉強しています。そして、今後はPHP/Laravel/vue.js/Reactなどのフレームワークを学習していきます。 日々の勉強で学んだことや自分なりに理解できたことを発信していきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away