floatを指定すると背景がズレる・消える(簡潔に解説)

困りごと

<div class="lessons">
  <div class="lesson">
    <div class="lesson-icon">a</div>
  </div>
  <div class="lesson">
    <div class="lesson-icon">b</div>
  </div>
  <div class="lesson">
    <div class="lesson-icon">c</div>
  </div>
  <div class="lesson">
    <div class="lesson-icon">d</div>
  </div>
  <!-- 下記については「解決策」で解説する -->
  <div class="clear"></div>
</div>

上記htmlについて，下記のようなCSSだと，親要素で指定した背景の高さは0になってしまいます。※floatを指定しない場合は，子要素を包み込む高さになります

.lessons {
  background-color: red;
}

.lesson {
  float: left;
}

floatを指定した場合

floatを指定しない場合

解決策

そこで，下記のように，clearクラスを設定する。htmlに関しては，下から2行目のdiv class="clear"が該当

.lessons {
  background-color: red;
}

/* 加筆した箇所 */
.clear {
  clear: left;
}

.lesson {
  float: left;
}

これにより，lessonで指定したfloatは解除され，子要素を包み込む高さに設定されます。

例えば今回の例だと，下図のように横並びのまま親要素で指定した背景が子要素を包み込む形で反映されます。

ただ実は，これより簡単に解決する方法もあるんです。(今回はあくまでfloatにおける問題の解決策を書いてます)

詳細については，以下をご参照ください〜