Categories: HTML&CSS

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

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp