Проблема с флоатами?

Question

[desuvin]

Совсем глупый вопрос, но ранее с такой проблемой не сталкивался. Обычно юзаю инлнай блоки для подобных сеток. Решил использовать materializecss.com/grid.html
Сетка вроде как в бутстрапе, но не вижу клиаров из коробки. В результате получается такой ужас


Делал следующее:
1) clearfix на .col:nth-child(4n+4)
2) clear: both на .col:nth-child(4n+4)
3) clear: right на .col:nth-child(3n+3)
4) float: none на .col:nth-child(4n+4)

Ни один способ не помог.Проблему понимаю - обтекает последний элемент, а не первый в ряде. Как такое можно решить без оборачивания всех трех .col в row? Предположим, что единственным выходом будет завернуть все 3 колонки в .row и сделать ему clearfix, но как тогда в таких случаях делать адаптивность.
Понимаю, что вопрос глупый, но ранее юзал susy с инлайн блоками.

Answer 1

[Евгений Петров]

Если я верно понял, у вас примерно так (пример для трёх столбцов).
Думаю, что clear вам не помог, потому что формула неверна. Коэффициент перед n — количество столбцов, а второе слагаемое — номер столбца.

Пример (для тех же трёх столбцов)

.block:nth-child(3n + 1) {
	clear: left;
}

Comments

[desuvin]

Непонял почему это работает. 4n+4 же будет каждый четвертый элемент. 3n+1 - первый, 4-ый, и так далее. Но суть будет такой же. Разве нет?

[desuvin]

Хотя посчитал и понял, что конкретно тупанул. В флоат сетках, что юзал, уже были клиары по классам. А с инлайнами проблем не было. Спасибо за помощь

[Евгений Петров]

desuvin: Вам нужно clear ставить не у последнего в строке элемента, а у первого.

Answer 2

[Назар Мокринский]

С float и inline-block можно как угодно упороться, но для решения таких задач уже давно существует display: flex

Comments

[desuvin]

Да, флексы посматривал. Но тут ошибка уже математическая была. Казалось, что на втором ряде первый элемнет имеет номер 4, а на третьем значит 8. В этом и заключалась ошибка.