clearfixを使ってfloatによる回り込みを解除する

floatによる回り込みを解除するCSSテクニック

clearfixは10年以上前から使われてきた、floatプロパティの回り込みを解除するためのCSSテクニックです。
IE6が全盛期だった頃から非常に広く使われてきました。

具体的には、次のような記事一覧をfloatプロパティで横並びのレイアウトにしたときに、続くコンテンツへの影響を防ぐために使います。

もしclearfixを使わなかった場合は、次のような表示崩れが起こります。

親要素にoverflowプロパティで「hidden」を指定したり、floatプロパティの代わりにフレックスボックスを使うなど他の方法もありますが、clearfixとfloatプロパティの組み合わせは手軽なため今でも多く使われています。

clearfixの使い方もいくつかありますが、今回は擬似要素「::after」を使う方法を解説します。
まずはHTMLのマークアップコードから見てきます。

HTML コード例

<section class="clearfix">
  <article>
    <header>
      <p class="text_post_date"><time datetime="2018-08-01">2018.08.01</time></p>
      <h2>タイトル1</h2>
    </header>
    <p class="text_excerpt">コンテンツの説明文<br>コンテンツの説明文</p>
    <div class="btn_area">
      <a href="#">開く</a>
    </div>
  </article>
  <article>
    <header>
      <p class="text_post_date"><time datetime="2018-07-30">2018.07.30</time></p>
      <h2>タイトル2</h2>
    </header>
    <p class="text_excerpt">コンテンツの説明文</p>
    <div class="btn_area">
      <a href="#">開く</a>
    </div>
  </article>
  <article class="right_content">
    <header>
      <p class="text_post_date"><time datetime="2018-07-28">2018.07.28</time></p>
      <h2>タイトル3</h2>
    </header>
    <p class="text_excerpt">コンテンツの説明文</p>
    <div class="btn_area">
      <a href="#">開く</a>
    </div>
  </article>
</section>
<p>テキストコンテンツ</p>

article要素の親要素となるsection要素にクラス「clearfix」を指定します。

CSS コード例

article {
  float: left;
}

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

続くCSSでは、クラス「clearfix」が指定された要素の末尾に擬似要素を挿入し、clearプロパティを使ってfloatプロパティを解除しています。
clearプロパティを有効にするためにはブロックレベルの要素である必要があるため、「display: block;」と「content: "";」を指定します。

擬似要素自体は非表示となるように、widthプロパティとheightプロパティをそれぞれ「0」にします。