Почему не срабатывает clearfix?

Question

[vezan]

Привет! Я учусь верстке
Есть такой кусок кода:
https://jsfiddle.net/w9hkoej7/7/

у класса .popular_title и .popular_subtitle я прописал марджин.Хочу чтобы он отсчитывался от изображения. Игнорирование margin-left аргументирую для себя выпадением картинки из потока из-за float: left. Прописал clearfix у родительского блока к картинке, ожидая чуда, но чуда не произошло. Где я не прав и как правильнее?

Answer 1

[Максим]

Рабочая очистка обтекания

.clear,
.clear:after,
.clear:before{
  content:"";
  display:block;
  clear:both;
}

Подключаете так

<div class="item clear"></div>
<div class="item--popular clear"></div>
<div class="item--credit clear"></div>
<div class="item--reviews clear"></div>

А то что вы делаете в 2018 году уже надо делать не на обтекании а на flexbox вот так

Comments

[Rustam Bainazarov]

Вместо display: block, лучше display: table. Block может иногда добавлять высоту.