【8/27まで】Udemyの人気コースが今なら1,200円から!!

【CSS3】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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です