float: left

[GuitarFan]

http://jsfiddle.net/ruCgg/1/

Почему при использовании float: left div вылезает из другого? Разве так должно быть?

Может я где-то накосячил?

[Kray Storm]

Это не float div вылезает из другого - это тот другой игнорирует float div и всех остальных, кто выпадает из нормального потока.

Да, так должно быть - когда придумывали float, у разработчиков был определенный Великий Замысел.

Что делать

Что еще делать

Есть еще и другие интересные способы.

[GuitarFan]

Спасибо.

Думаю способ с overflow: hidden; самый простой.

На http://htmlbook.ru/css/overflow

Написано:

Отображается только область внутри элемента, остальное будет скрыто.

Судя по тому, что там написано, div с float который вылез должен был просто не отображаться, а отображаться должно только то, что внутри окружающего его div - то есть пустота. Вылезший div должен был обрезаться.

Но видимо там не дописали, что это так же влияет на элементы в float:left которые вылезли из div'а и помещает их назад.

[Kray Storm]

Но видимо там не дописали

Все там дописали))

Все верно: overflow:hidden скрывает элементы при переполнении. Также верно, что переполнение возникает, если контент блока больше самого блока. И верно, что высота блока по умолчанию формируется высотой его содержимого.

Т.е. - чтобы что-то "обрезалось", у блока с overflow:hidden должна быть указана высота. В случае, если она не указана, блок будет тянуться настолько, насколько нужно, чтобы вместить все свое содержимое, даже то, которое куда-то плавает.

А значит, этот способ не подходит, если наш блок вынужден быть с заданным height. Потому как все "лишнее" содержимое float внутри него просто спрячется.

[GuitarFan]

Т.е. - чтобы что-то "обрезалось", у блока с overflow:hidden должна быть указана высота. В случае, если она не указана, блок будет тянуться настолько, насколько нужно, чтобы вместить все свое содержимое, даже то, которое куда-то плавает.

В том то и дело, что без него то блок должен тоже растягиваться по высоте контента. Но без него float переносится на новую строку, как элемент, который не внутри того div(как он есть в коде), а снаружи. А overflow:hidden позволяет растягиваться не только с определенным контентом, но и с float: left, что конечно же не написано на сайте.

[Great Rash]

Это побочный эффект, т.к. он создает новый контекст форматирования для блока. В описании свойства overflow: hidden; не должно быть упоминания о том, что оно помогает избежать проблемы с float. Более того, такого описания нет и в официальной спецификации. Однако в официальной спецификации есть такое понятие как контекст форматирования блоков, где, в том числе, написано, что новый контекст создается если блоку (т.е. в вашем случае диву) назначить overflow: hidden;, то тогда float окажется внутри него.

Короче:

1) в описании overflow: hidden; ничего про это быть не должно

2) учитесь пользоваться спекой (знаю она запутана, да еще и на инглише...)

3) на сайте всё правильно написано