【CSS3】floatの回り込みを解除する（clearfix編）

2020年10月27日2023年1月22日

floatの回り込みを解除する（clearfix編）

目次へ

floatの回り込みを解除する（clearfix編）

STEP.1

divの箱を6つ作る

divの箱を6つ作ります。

See the Pen
clearfix1 by shiakisudev (@shiakisu)
on CodePen.

STEP.2

box1要素にfloat:leftを設定する

box1要素にfloat:leftを設定します。

See the Pen
clearfix2 by shiakisudev (@shiakisu)
on CodePen.

STEP.3

floatを解除する

::afterを使うのがコツです。

See the Pen
clearfix3 by shiakisudev (@shiakisu)
on CodePen.

完成版のソースは以下のとおりです。

HTML

<div class="clearfix">
  <div class="box1">1</div>
  <div class="box1">2</div>
  <div class="box1">3</div>
</div>
<div class="box2">4</div>
<div class="box2">5</div>
<div class="box2">6</div>

CSS

.box1 {
  height:50px;
  width:50px;
  background-color:green;
  border:1px solid;
  box-sizing:border-box;
  float:left;
}
.box2 {
  height:50px;
  width:50px;
  background-color:skyblue;
  border:1px solid;
  box-sizing:border-box;
}
.clearfix::after {
  content:"";
  display:block;
  clear:both;
}