htmlとcssを勉強して、いざコーディングする段になったとき、
ほとんどの人が最初の方にぶち当たるであろうfloatとclearの壁。
そして現れる救世主clearfix！

私もfloatをかけたら反射的に使ってきましたが、よく考えたらその偉大な力が具体的にどう発揮されているのか、ちゃんと理解できてなかったかもしれない…。
ということで、clearfixを丁寧に理解してみることにしました。

まずはデモページを準備

html

<div class="box01">
<img src="img.png" alt="" width="150" height="150">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

css

.box01 {
background-color: #ccc;
}
.box01 img {
float: left;
margin-right: 20px;
}

デモページの見た目は画像でお伝えしていきます。

clearfix_01

背景色の付いたdiv.box01の中にimg要素とテキストがあり、
img要素にfloat:left;を適用させています。
当然、背景色は出て欲しい高さになっていません…。

clearfixのプロパティをひとつずつ適用させていきます

ブリッジで使っているclearfixはこちら
レガシーブラウザ対応分は割愛しています

.clearfix:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
line-height: 0;
}

これらの各プロパティをわかりやすい順番で
div.box01に対して適用させていきます。

content: “.”;

まずはこれ。

clearfix_02_02

一見わかりづらいですが、テキストの最後にピリオドが出現！
:after擬似要素は、指定した要素のあとに生成されるようなイメージがあるかもしれませんが、実はその要素の内部の最後に生成されるので、このような形になります。

display: block;

おなじみdisplayプロパティ。

clearfix_03

ブロックレベル表示となったため前後が改行されました。
なぜこれが必要なのかは少しあとで。

clear: both;

一番大事なclear。

clearfix_04

floatが解除されたため、img要素の下に改行されました。
先ほどdisplay: block;を適用させたのはclear: both;を使うから。
clearプロパティはブロックレベル要素にしか指定できません。

ここまできたらあとは”.”を消すだけです。

height: 0;

clearfix_05

高さがなくなったので背景がついてこなくなりました。
だけどばっちり”.”の存在感があるので不安です。
そこでdiv.box01をまるっとコピペしてみました。

clearfix_05_02

するとこのとおり、高さはちゃんとなくなっています！

line-height: 0;

clearfix_06

さらに行の分の高さがなくなりました。

visibility: hidden;

clearfix_07

ピリオドが消えました！
役割はきちんと果たしたまま…。

耳慣れないプロパティなので、リファレンスを引用させていただくと

visibilityプロパティは、ボックスの表示（visible）・非表示（hidden）を指定する際に使用します。

非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。

出典：HTMLクイックリファレンス

だそうです。
opacityとも違う、初めて知る概念…。
経験値が上がった気がします。

まとめ

ともかく、clearfixのなんたるかは明らかになりました。
ざっくり説明すると、
clear: both;を適用するためのブロック要素を:after擬似要素で生成して、
その存在感はひっそりと消す。
こんな感じでしょうか。

もちろん、厳密にはもっとあらゆる配慮が含まれたclearfixですから、全貌を理解するまでには至っていないかもしれませんが、今回は手を動かしてみたことに価値があったと思います。

最後に、コピペですぐ試せるコードを準備したので、よければやってみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clearfixを理解しよう</title>
<style><!--
.box01 {
background-color: #ccc;
}
.box01 img {
float: left;
margin-right: 20px;
}
.box01:after {
content:".";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
--></style>
</head><body>

<div class=”box01″>
<img src=”img.png” alt=”” width=”150″ height=”150″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

</body>
</html>

私もこの記事、さっそく新人教育で使ってみようと思います。

お問い合わせ