CSSのclearfixを完全網羅【初心者でも分かる入門図解付き】

2023.03.29
cssのclearfixを完全網羅

Webページなどを作る際、レイアウトが崩れてしまったり、うまく表示できなかったり、、、
上手に整えられなかった経験はありませんか?
実は、「floatプロパティ」が原因となっている場合が多くあります。

floatプロパティの解除法は様々な手法がありますが、「clearfix」なら簡単に問題を解決することができます。

そこで今回は、HTML/CSS初心者の方でもわかる様、clearfixの書き方やfloatの回り込みの解除方法について解説していきます。
実際にコードを書きながら実践的に学べる様な記事になっておりますので、作業をしながらプログラミングの学習へ活かして頂ければと思います!

clearfixとは?

レイアウトが崩れてしまった際に役立つ「clearfix」は、どんな機能があるのでしょうか?

実は、clearfixを用いることによってfloatプロパティによる回り込みを解除することができるのです。

「floatプロパティって一体何??」と思われた方は、まずはこちらの記事をご覧ください。

CSSのfloatを完全マスター【CSSのfloatを完全マスター】初心者でも分かる入門講座

floatプロパティを使用することによって、縦に並べられたブロック要素を横並びにすることができます。

しかし、floatプロパティを用いると要素が浮いた状態になるため、他の要素が下に回り込んでしまうトラブルが起きてしまいます。

floatプロパティを用いると他の要素が下に回り込んでしまう

そのトラブルを解決するために使えるのが、clearfixです。

clearfixは、「浮いた要素のバリア機能」とイメージすると分かりやすいと思います。

clearfixを指定することにより、浮いた要素にバリアのようなものを張ることができ、浮いた要素に他の要素が回り込むのを防ぐことが出来るのです。

clearfixを指定することにより、浮いた要素に他の要素が回り込むのを防ぐことが出来る

こちらのWebサイトも、float・clearfixが使用されています。

clearfixによって他の要素が回り込むのを防いでいる

「activity」の下の四角い項目が綺麗に配列されていますが、clearfixによって他の要素が回り込むのを防いでいます

float・clearfixが使用されている

上記のようなサイトを簡単に作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

サイト制作を効率的に学習できる!!

clearfixでfloatによる回り込みを解除する方法

それでは、実際にclearfixを用いてfloatを解除する方法を解説していきます!

こちらの画像の緑と黄色のブロックだけを横並びにしていきます。

clearfixでfloatによる回り込みを解除する方法

【理想形】

理想形

まず、横並びにするためにCSSでyellowとgreenに「float: left;」をそれぞれ指定します。

HTML・CSSのコードはこちらです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>clearfixの使い方</title>
    <link rel="stylesheet" href="clearfix.css">
</head>
<body>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
</body>
</html>
clearfix.css
.green{
  background-color: green;
  width: 200px;
  height: 200px;
  float: left;
}
.yellow{
  background-color: yellow;
  width: 200px;
  height: 200px;
  float: left;
}
.red{
  background-color: red;
  width: 200px;
}

しかしブラウザで表示させると、redのブロック要素が消えてしまいました!

redの要素が回り込んでしまっている

redのブロック要素が、floatによって浮いたgreenとyellowの要素の下に回り込んでいます!!

clearfixを用いて回り込みを解除し、このような状態を目指します!

clearfixを用いて回り込みを解除した状態

ステップ1 HTMLで要素を囲む

まずはじめに、clearfixを指定するHTMLの要素をdivで囲みます。(divとは?)

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>floatの使い方</title>
    <link rel="stylesheet" href="float.css">
</head>
<body>
    <div class="clearfix">
    <div class="green"></div>
    <div class="yellow"></div>
    </div>
    <div class="red"></div>
</body>
</html>
floatプロパティによって浮いた状態の要素(green,yellow) を、<div class=”clearfix”>で囲みます。

ステップ2、CSSでclearfixを指定する。

次に、CSSでclearfixを指定します。

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

.green{
  background-color: green;
  width: 200px;
  height: 200px;
  float: left;
}
.yellow{
  background-color: yellow;
  width: 200px;
  height: 200px;
  float: left;
}
.red{
  background-color: red;
  width: 200px;
  height: 200px;
}

.clearfix::after {
content: “”;
display: block;
clear: both;
}
を一番始めに記入することにより、HTMLで指定したclearfixに全て対応させる事ができます。

すると、floatによって浮いた要素にバリアのようなものが張られ、redのブロック要素が回り込まなくなります。

redのブロック要素が回り込まなくなる

赤の要素が緑と黄色の要素に回りこまなくなりましたね!!

ブラウザで、このように表示されたらOKです!

まとめ

いかがだったでしょうか?

今回学習した内容を、ざっくりと復習しましょう!

  • floatによる回り込みをclearfixで解除できる
  • clearfixは、浮いた要素に壁をつけるイメージ
  • HTMLでclearfixをかける要素を<div class=”clearfix”>で囲む
  • CSSで.clearfix::after {~  を記載

つまずきやすい内容ですが、clearfixはCSSでレイアウトを作成するときに大変便利なプロパティです。

しっかりと内容を理解して、今後の学習に活かしていきましょう!

また、CSSの基本的な書き方や概要について知りたい方はこちらの記事をご覧ください↓
CSS(スタイルシート)基本の書き方を5ステップで解説【初心者向け】CSS(スタイルシート)基本の書き方を5ステップで解説

また、今回の内容も含めてしっかりとプログラミング学習をしたい方は我々が運営するプログラミングスクール「DMM WEBCAMP」へのご参加をお待ちしております!!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5