【9月枠も残りわずか】転職保証コース

CSSのclearfixについて徹底解説【floatをスッキリ解除!】

「floatプロパティを使ったら、画像の下に文字が回り込んでしまった、、、!」

そんな経験はありませんか?

floatプロパティによる回り込みは、「clearfix」を用いることにより防ぐことができます。

今回の記事では、floatによる回り込みをclearfixを用いて防ぐ方法や、clearfixの書き方について詳しく解説していきます!

clearfixとは?

clearfixは、CSSで要素を横並びにするために使用するfloatプロパティを使う際に必要になります。

floatプロパティを使用することによって、縦に並べられたブロック要素を横並びにすることが出来ますが、要素を浮いた状態にするため、他の要素が下に回り込んでしまうというデメリットがあります。

その問題点を解決するために使えるのが、clearfixです。

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

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

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

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

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

それでは、実際に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のブロック要素が、floatによって浮いたgreenとyellowの要素の下に回り込んでいます!!

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

 

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

まずはじめに、clearfixを指定するHTMLの要素を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のブロック要素が回り込まなくなります。

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

まとめ

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

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

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

 

つまずきやすいclearfixですが、CSSでレイアウトを作成するときに大変便利なプロパティなので、頭に入れるようにしましょう!

 

10月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きのプログラミングスクール

で未経験からエンジニアを目指そう!

 

転職保証コースは質の高いカリキュラムで転職成功率98%

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある