【CSS】clearfixの考え方とやり方

clearfixとは？

clearfixとはfloatプロパティを使って横並びになっている要素をdiv要素などでボックスの中に内包し、その外側に回り込みの影響が出ないようにするテクニックのこと

やり方

親要素にclearfixクラスを用意
↓
clearfixをセレクタにして疑似要素:afterを使用 ( .clearfix::after {} )
↓
contentプロパティに空の値を指定 ( content: ""; )
↓
displayプロパティに「block」を指定 ( display: block; )
↓
clearプロパティを使用して、floatを解除 ( clear: both; )

floatプロパティについて（別記事に記載）

floatプロパティの動作については下記の記事にサンプルを記している

garbage-tech.hatenablog.com

１．floatプロパティの性質

１−１．通常、親要素の高さは内包する子要素の高さに合わせて伸縮する。

ソースコード

<!-- sample.html -->
<div id="wrap">
  <div class="parent">
    <div class="child">子要素</div>
    <div class="child">子要素</div>
  </div>
</div>

/* style.css */
  #wrap {
    width: 300px;
    padding: 0 10px;
  }

  .parent {
    background-color: #cccccc;
  }

  .child {
    height: 200px;
    width: 200px;
    text-align: center;

  }

  .child:nth-child(1) {
    background-color: yellow;
  }

  .child:nth-child(2) {
    height: 100px;
    width: 100px;
    background-color: aqua;
  }

１−２．親要素の中にある子要素がfloatで配置されると、子要素を包んでいる親要素の高さがなくなってしまう

親要素（parentクラスの高さがなくなったことでグレーの色が消えている）

ソースコード

/* style.css */

  .child:nth-child(1) {
    background-color: yellow;
    float: left;  /* 追加 */
  }

  .child:nth-child(2) {
    height: 100px;
    width: 100px;
    background-color: aqua;
    float: right; /* 追加 */
  }

１−３．floatの影響でセクションの下に文書を追加するとレイアウトが崩れる

左右のボックスの段差に文章が回り込んでいる

ソースコード

<!-- sample.html -->

<div id="wrap">
  <div class="parent">
    <div class="child">子要素</div>
    <div class="child">子要素</div>
  </div>
  <p>aaaa</p>  <!-- 追加 -->
</div>

/* style.css */

  p {                 /* 追加 */
    color: red;
    font-weight: bold;
  }

２．clearfixで回り込みを解除する

２−１．親要素(parentクラス)にclearfixクラスを追加する

ソースコード

<!-- sample.html -->

  <div id="wrap">
    <section class="parent clearfix">  <!-- clearfixクラスを追加 -->
      <div class="child">子要素</div>
      <div class="child">子要素</div>
    </section>
　<p>aaaa</p>
  </div>

２−２．疑似要素「:after」を使う

疑似要素について

要素の前後にテキストや画像を追加したり、要素内の特定箇所に対してスタイルを指定することができる記述方式

/* style.css*/

  .clearfix:after {
    /* ここに必要なプロパティと値を記述していく */
  }

contentプロパティに空の値を指定

contentプロパティは、:before または :after の擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用する

/* style.css */

  .clearfix:after {
    content: "";  /* contentプロパティを追加。 値は空 */
  }

displayプロパティで「block」を指定

疑似要素:afterで生成されるボックスはインライン要素として扱われるので、displayプロパティでブロックレベル要素に指定する

/* style.css */

  .clearfix:after {
    content: "after";  /* わかりやすくするためにテキストを入れている */
    display: block;     /* ブロックレベル要素に指定 */
  }

２−３．clearプロパティを使ってfloatを解除

clearプロパティは、インライン要素に他しては無効となる
なのでブロックレベル要素として扱う必要がある

/* style.css */

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

3．完成系

ソースコード

<!-- sample.html -->
<div id="wrap">
  <div class="parent clearfix">
    <div class="child">子要素</div>
    <div class="child">子要素</div>
  </div>
  <p>aaaa</p>
</div>

/* style.css */

#wrap {
  width: 300px;
  padding: 0 10px;
}

.parent {
  background-color: #cccccc;
}

.child {
  height: 200px;
  width: 200px;
  text-align: center;

}

.child:nth-child(1) {
  background-color: yellow;
  float: left;
}

.child:nth-child(2) {
  height: 100px;
  width: 100px;
  background-color: aqua;
  float: right;
}

p {
  color: red;
  font-weight: bold;
}

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