Как решить проблему с float?

Question

[Дмитрий Локшин]

Друзья, привет.

Проблема с версткой блоков при использовании float.
Должно быть следующее:


но по факту, если контент разной высоты, то блоки начинают "рассыпаться":


HTML:

<div class="container">
   <div class="block"></div>
   <div class="block"></div>
   <div class="block"></div>
</div>

Разваливается всё при таком способе:

.block{
   box-sizing: border-box;
   float: left;
   width: 25%;
}

Также пробовал способ inline-block:

.container{
   font-size: 0; /*Убираем расстояние между блоками*/
}
.block{
   box-sizing: border-box;
   display: inline-block;
   width: 25%;
   vertical-align: top;
}

При таким способе всё работает как надо, но не работает в safari 5.1.7 (а нужна его поддержка). Конечно, можно добавлять после каждого четвертого блока, например, пустой div с классом clearfix, который будет очищать обтекание, но это очень неудобно, особенно когда блоки будут динамически добавляться из админки, а также при адаптации, когда блоки будут перестроены в три колонки, затем в две и т.д.
Также не подходит способ с flexbox, т.к. также не работает в safari 5.1.7 и в ie9.

Может кто знает хорошее решение (думаю с такими ситуациями сталкиваются абсолютно все)? Буду очень благодарен.

Comments

[Степан Крапивин]

зачем после каждого четвёртого добавлять clear, когда это можно сделать через псевдоэлемент блока .container

.container:after

[Дмитрий Локшин]

Степан: Спасибо за ответ. но это совсем не то. Это Вы имеете ввиду добавить родителю, чтобы он просто не схлопывался, и это у меня реализовано, просто в примере не указал. Задача совсем в другом.

Answer 1

[Дмитрий]

Пример
https://jsfiddle.net/soledar10/opy1jh9x/

Comments

[Дмитрий Локшин]

Блин, как же все элементарно. Я не тому блоку задавал очистку обтекания. Спасибо большое, Дмитрий!

Answer 2

[Сергей]

Проблему float-ов легко решить отказом от их использования в пользу flexbox-ов. А вообще можно прописать min-height.

Comments

[Дмитрий Локшин]

Здравствуйте, спасибо за ответ.
Про flexbox сразу написал в вопросе, а с min-height вообще не пойдет, т.к. у клиента может быть в одном из верхних блоков очень много контента, а в нижних, во всех мало, и представьте если у них будет минимальная высота, как это будет уродливо выглядеть.

[Froggyweb]

У Сергея очень вредный совет

[Сергей]

Froggyweb: я же не знаю изначально насколько они отличаются по высоте. Может это блоки с определенным максимальным количеством строк текста, например превью новости. В данном случае действительно не подходит. Предложите альтернативу уже изложенным предложениям.

Я бы делал с помощью inline-block, наверняка есть какой то костыль для safari

[Froggyweb]

Ограничение высоты - хуже чем important в инлайн.
Есть clear например очень стандартный

[Сергей]

Froggyweb: Про него уже написали или вы не заметили? Я предложил альтернативу. Ограничения высоты тут кстати нет, задается минимальная высота блока.

Answer 3

[Василь Бойко]

Как верстальщик с большим опытом советую Вам использовать jquery.matchHeight-min.js