【Part1 - Cap2(p25)】float解除 ー clearfix

・下記だとfloatが指定されているため高さを認識できなくなり、footerが上がってしまう
html

<div class="wrapper"></div>
    <div class="left"></div>
    <div class="right"></div>
<div class="footer"></div>

css

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

・改善点「clearfix」
html

<div class="wrapper clearfix"></div>
    <div class="left"></div>
    <div class="right"></div>
<div class="footer"></div>

css

.left {
    float: left;
}
.right{
    float: right;
}
.clearfix::after {
  content: '';   /* 擬似要素内で表示するコンテンツを指定するプロパティで、これが無いと擬似要素が表示されなくなる。 */
  display: block;    /* ブロック要素にする */
  clear: both;    /* 左寄せ、または右寄せされた全ての要素に対する回り込みを解除 */
}

参考

creator.aainc.co.jp breezegroup.co.jp wunderstand.net