clearfixについて

はじめに

htmlの記述を見てると時々見かけるclearfixという記述。
あまり理解できていなかったためわかったことをまとめる。

clearfixの特徴

floatを解除できる！
自分でビューを作成していてこの特徴がとても便利に感じた。

1. 自分が陥った状況

index.html.erb

<div class= contents>
  <div class= left-box>
  </div>
  <div class= right-box>
  </div>
  <div class= bottom-box>
  </div>
</div>

.left-box{
  float: left;
}
.right-box{
  float: right;
}

分かりやすいように必要な記述のみを記載しています。
自分の意識ではこの記述のみでleft-boxとright-boxがcontentsの中で左右に別れてくれると考えていたが実際にビューを確認するとbottom-boxがleft-boxとright-boxと重なるように上部に移動していた。
これはfloatによって浮いた2つの要素の下にbottom-boxが周り込んだためこのようなビューとなったらしい。

clearfixを使用

index.html.erb

<div class= contents clearfix>
  <div class= left-box>
  </div>
  <div class= right-box>
  </div>
　<div class= bottom-box>
  </div>
</div>

.left-box{
  float: left;
}
.right-box{
  float: right;
}

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

この記述でfloatを解除することができcontentsの中にleft-boxsとright-boxを左右に並べ、その下にbottom-boxを配置することができる。