CSS で float を解除する時は clearfix を使おう

今更の話なんですが、なんとなくまとめてみることにします。

たぶん CSS 初心者の方は float の解除をするのに困ることがあると思います。
clear: both; で解除できると思うと見せかけて、実はそれじゃあダメなんですね。確かこれだけだと親要素が潰れちゃってダメなんですね。

それの対処法として、大体の人はこんなんやっちゃうと思います。
わかりやすくタグに直接 CSS 書かせてもらいますね。

1
2
3
4
5
6
7

<div style="float: left;">
	<p>テキスト</p>
</div>
<div style="float: right;">
	<p>テキスト</p>
</div>
<div style="clear: both;"></div>

でもこれだと見栄えのための HTML を書くことになっちゃうと思いますのでダメです。
じゃあどうすれば良いのか。

これは一般的なのか私には分かりませんが、私はこういう場合に clearfix というものを使います。
clearfixでfloatを解除 | d-spica

CSS をそのまま引用させていただきますです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
 
.clearfix {
  min-height: 1px;
}
 
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

そして、HTML は以下みたいな感じです。

1
2
3
4
5
6
7
8
9

<div class="clearfix">
	<div style="float: left;">
		<p>テキスト</p>
	</div>
	<div style="float: right;">
		<p>テキスト</p>
	</div>
</div>
</div>

これは確か after 擬似要素でその要素の下に clear: both; をする要素を追加することができるんですね。
と、自分が後でコピー&ペーストできるように記事にしておきました。

もし、clearfix 使ってない人がいたらぜひ使ってみてくださいね！

ちなみに初心者の方はこんなのがあるんで、ぜひ参考にしてみてください。

ITキヲスク | CSS基礎文法最速マスター