Проблемы с clearfix и высотой блока

[phweb]

Я знаю, тут сидят опытные люди. Я сам занимаюсь версткой не первый год, и считаю себя достаточно профессиональным в этой области. Для чего я это написал.

 

Не давно меня поверг в ступор один баг (может фича) связанный с clearfix'ом (я полагаю его использует больниство верстальщиков)

Собственно код для ознакомления тут  http://codepen.io/anon/pen/yFnJo

 

Вопрос: почему растягивается первый item на высоту sidebar'a?

[sigma77]

Потому что запрет обтекания работает на все предшествующие плавающие блоки - http://www.w3.org/TR/CSS2/visuren.html#flow-control

[Switch74]

если для .item добавите

  float:left;  width:250px;

будет то, что вам нужно

float у родителя для clear работает так же как position у родителя для absolute 

[Sergik+]

К сожалению позиционирование флотами это один большой ужасный хак, надеюсь скоро забудем эту хрень как когда то табличную верстку.

[SelenIT]

float у родителя для clear работает так же как position у родителя для absolute

Не совсем «так же», но это выделяет содержимое блока в отдельный блочный контекст форматирования (наряду с display:inline-block, display:table(-cell) и overflow:hidden/auto/scroll). Соответственно, необходимость в clearfix-е отпадает.

Наглядно разницу между работой clearfix-а и отдельного блочного контекста можно увидеть в примере из этой статьи. К сожалению, ни один вариант нельзя назвать идеальным, у каждого свои ограничения. Всё-таки флоаты для раскладки — действительно хак…

[Switch74]

я имел ввиду, что если у родителя стоит float, то clear будет действовать только на элементы внутри этого родителя
в случае с absolute поведение подобно по отношение к ближайшему родителю с position

может быть не очень корректно выразился

[phweb]

если для .item добавите

в принципе сработало, но в таком случае схлопнулся родительский блок .text

конечно не сильно портит картинку, но хочется чтоб все было по фен-шую

в завершение темы хотелось бы посмотреть кто как релазует такую верстку (без таблиц, ну и кроссбраузерно ИЕ8+)

[Vessel]

А ведь кроме флоатов, по-сути, кроме inline-block больше ничего и нет.

 

Position в расчет можно не брать, впрочем как и table.

[Switch74]

добавьте clearfix для вашего .text,

а так можно было сразу ему и делать float, не заметил что у вас item в обертке

[SelenIT]

clear будет действовать только на элементы внутри этого родителя

Это и есть практическое определение отдельного блочного контекста

 

кроме флоатов, по-сути, кроме inline-block больше ничего и нет.

Во всём новом (IE10+) есть флексбоксы. Ну и display: table/table-cell рановато совсем списывать в утиль (напр. в качестве фолбэка для тех же флексбоксов в IE8-9).

[Vessel]

Во всём новом (IE10+) есть флексбоксы. Ну и display: table/table-cell рановато совсем списывать в утиль (напр. в качестве фолбэка для тех же флексбоксов в IE8-9).

 

Да, флексбоксы имеют огромный потенциал, но пока вижу частенько в проектах требования 8 осла. С этим в ближайшие 1,5 лет, думаю, ничего не поделаешь. 

[SelenIT]

Во многих частных случаях можно совместить «фирменные» хаки для старых IE с флексбоксами для новых браузеров, напр. наподобие такого.

[IIIIIIIIII]

Я сам занимаюсь версткой не первый год, и считаю себя достаточно профессиональным в этой области.

 

Чтобы считать себя достаточным профессионалом в верстке, надо знать хорошо теорию, например, как товарищ SelenIT. А вы просто достаточно опытный, как и основная масса в верстке. Поэтому и возникают такие вопросы.

[phweb]

Чтобы считать себя достаточным профессионалом в верстке, надо знать хорошо теорию, например, как товарищ SelenIT. А вы просто достаточно опытный, как и основная масса в верстке. Поэтому и возникают такие вопросы.

 

c теорией все отлично, просто до этого не сталкивался с такой проблемой, а как правило новые знания появляются при возникновении проблемы