HTML clearfixの使い方

Memo

clearfixの使い方

サンプルを準備

sample

<div class="box1">box1
	<div class="box2">box2</div>
	<div class="box3">box3</div>
</div>

<div class="box4">box4</div>

css

.box1 {
  width: 500px;
  border: 5px solid #000;
}
.box2 {
  height:100px;
  width: 100px;
  background-color:#999;
  float: left;
}
.box3 {
  height:100px;
  width: 100px;
  background-color:#777;
  float: left;
}
.box4 {
  height:50px;
  width: 100px;
  background-color:#555;
  float: left;
}
/*-- clearfix このCSSが重要 --*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

サンプルではfloatした要素の親要素の高さが無い状態

See the Pen RwbzYMP by abek922 (@abek922) on CodePen.

floatした要素の親要素にクラス名clearfixをつけてclearfixのCSSを適応

sample

<div class="box1 clearfix">
	<div class="box2"></div>
	<div class="box3"></div>
</div>

<div class="box4"></div>

clearfixのCSSを読み込むと高さがとれる状態になる

See the Pen Clearfix_2 by abek922 (@abek922) on CodePen.

clearfix

clearfix

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