Как избежать баг в работе clearfix метода?

Question

[Дима Паутов]

Всем привет. Есть такой клевый метод, для очистки float элементов Clearfix. Вот его код, что бы всем было проще понять с чем мы имеем дело.

.clearfix {*zoom: 1;}

.clearfix:before,
.clearfix:after {display: table;content: "";}

.clearfix:after {clear: both;}

У меня есть такая вот разметка, очень простая. Обычный резиновый макет, где контентная часть уменьшается в зависимости от ширины экрана.

Пример тут:
jsfiddle.net/rootd/cs9qtrkt/5

Беда в следующем! Первый блок clearfix в блоке content по какой то причине становится высотой равной блоку sidebar. Я очень долго копался, но так и не понял причины такого феномена. Если кто знает, скажите, в чем причина?

Проблему исправил так,
1) дал sidebar'у высоту 0.
2) Абсолютное позиционирование sidebar.
3) Заменить все стили clearfix на этот .clearfix {overflow:hidden;}

И все норм, но эти решения мне не подходят. Причина так и не ясна мне!

Answer 1

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

jsfiddle.net/petroveg/cs9qtrkt/2
Есть разные приёмы для учитывания контейнером дочерних элементов.

Comments

[Дима Паутов]

Пробовал, работает, но не то! Мне больше нужна причина самой проблемы, т.к. знаменитый bootstrap работает через clearfix, который у меня!

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

@bootd в вашем примере псевдообласть :after от первого же блока .clearfix учла левый плавающий блок, это же понятно:)

Хотите с псевдообластями работать? Не вопрос, но требуется создать область, учитывающую размеры плавающих потомков (overflow, float) jsfiddle.net/petroveg/wt25n3om/1

[Дима Паутов]

это ближе к истине! НО что то я про такой метод никогда не слышал. Верстаю уже года 4, а столкнулся с такой проблемой буквально пару месяцев назад.

Answer 2

[Артем Лисовский]

решил кейс, убрав:
display:table
jsfiddle.net/cs9qtrkt/3

Comments

[Дима Паутов]

Нет, блок контент перестал быть очищенным и блоки выехали за его пределы

[Артем Лисовский]

@bootd как это проявляется?

[Дима Паутов]

я перезалил пример, ссылка та же. только display: table удали

[Артем Лисовский]

@bootd у вас float:left из-за этого конфликт. используйте inline-block внутри контейнера

[Артем Лисовский]

@bootd jsfiddle.net/cs9qtrkt/6

[Артем Лисовский]

@bootd меня очень смущает этот display:table просто. выглядит как костыль аля лишь бы работало. не надо так.

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

@torrie согласен. Возня с этим display:table уж очень похожа на историю про 10 обезьян.

[Дима Паутов]

@torrie твой метод плохой. display: inline-block имеет боковой пробел, уж так повелось. Ты исправил это дав font-size: 0 классу clearfix, но вот не задача, а как же быть, если у меня внутри этого clearfix будет много разных тегов, в которых будет какой либо текст?

[Артем Лисовский]

@bootd хороший тон - задавать тегам нужный font-size. Обычно это делается глобально в самом начале.

[Дима Паутов]

ок, но а если внутри clearfix у меня лежит куча разных тегов, то теперь в css нужно прописывать всем размер? По моему-глупо, но трюк работает! Спору нет. Буду знать

[Артем Лисовский]

@bootd это как раз не глупо, а корректно :)