Завершение обтекания

Оригинал статьи: Clearing floats

Основная проблема, возникающая при использовани обтекания - обрамляющий контейнер не растягивается по высоте. Если, к примеру, установить border на обрамляющий контейнер, то прийдется использовать дополнительные стили, чтоб заставить браузеры растянуть этот контейнер.

Описание проблемы

Чтоб наглядно увидеть описанную выше проблему, опишем это с помощью css. А вот и результат: Теперь вы можете увидеть то, о чем я писал выше: обрамляющий контейнер не тянется по высоте блоков.
А мы хотели добится того, чтоб он тянулся. Вся проблема в том, что обрамляющий контейнер не имеет своей высоты из-за того что внутри него помещены контейнеры с обтеканием.

Старое решение

Используя старое решение это проблемы вам необходимо было добавлять пустой контейнер в то место, в котором обтекание должно было завершатся и на него устанавливать clear:both Хоть этот способ и работает, но его нельзя назвать правильным. К тому же, все таки иногда возникают проблемы в браузерах, а именно добавляется отступ снизу. Обтекание также можно завершить используя псевдокласс :after, но так как этот способ не работает в браузере IE, воспринимать всерьез его нельзя. Первым кто опубликовал новое решение этой проблемы был Alex Walker.
И вот в чем это решение заключается: width:100% используется для того, чтоб этот метод работал в IE. Теперь, как видите, обрамляющий контейнер тянется по высоте вложенных блоков.

Используемые уловки

1. Метод работает с тремя значениями свойства overflow, а именно: auto, hidden, scroll. Естественно, если используется последнее значение, то будет видна полоса прокрутки
2. Для некоторых браузеров обязатальным условием является наличие установленных значений для width или height
3. Если используется height, то в браузере может появится полоса прокрутки если содержимое выходит за пределы контейнера.

Необходимость в свойствах width или heigh

Использование одного из этих свойств требуется для браузеров IE и Opera. Предпочтительней использовать свойство width, хотя это и может вызвать некоторые неудобства, так как для этого контейнера невозможно будет применять отступы.

IE MAC

Если вы хотите, что этот метод корректно работал в IE под МАСом - условие использования overflow: hidden является обязательным. Но этот браузер в любом случае будет отображать полосу прокрутки, не смотря на overflow: hidden.

Нежелательный скроллинг

Известна одна, но очень не приятная ошибка, которая может возникнуть при использовании этого способа - это появление нежелательного скролинга. Но есть и решение этой проблемы, для этого нужно следовать нескольким простым правилам:

1. Высота контейнера должна оставатся гибкой.
2. Обшая ширина содержимого не должна быть больше доступной ширина контейнера.

Следуя этим простым правилам вы сможете избежать появления нежелательных скроллингов.

Конечный вариант решения для завершения обтекания

В конце статьи я хочу привести полный листинг код для этого споособа.