Не отображается background-color под одним из div-ов, как поправить?

Question

[Влад Громов]

Не отображается background-color: #e4e4e2; под одним из элементов, не могу понять причину.

https://codepen.io/Vikkiners/pen/gZNLYZ

Comments

[Алексей]

Т.е. вас не смущает что родитель не растягивается на высоту элементов после применения float:left?
Сделайте на flex что заставило в 2019 использовать float?

Answer 1

[Алексей Уколов]

Причина в том, что у родительского контейнера высота не равна сумме высот детей. А не равна она потому, что float вырывает блоки из потока. Не используйте float для раскладки страницы.

Comments

[Влад Громов]

У детей нет заданной высоты, как и у родительского контейнера.
Без float пока не умею утрамбовывать несколько divов в один блок, если только таблицей.

Answer 2

[2cha.headz]

это добавить в css

.clearfix:after {
content: "";
display: table;
clear: both;
}

слою с классом workText добавьте класс clearfix

Comments

[Влад Громов]

Спасибо! Решило проблему