Свойство float и проблемы с ним связанные.

Некоторые проблемы,связанные с использованием CSS свойства float и способы их решения.

Приветствую читателей моего блога. Сегодня я расскажу Вам о некоторых проблемах, связанных с применением css свойства float и возможных способах их устранения.
Итак, давайте приступим.

Проблема первая.

Если у нас есть два дива и верхнему мы задаем свойство float, то он просто «проваливается» под нижний. Несмотря на то, что содержимое нижнего блока начинает обтекать верхний, сам нижний блок просто смещается на место верхнего. Что может доставлять определенные неудобства.


Решение достаточно простое. Достаточно задать нижнему блоку отступ в размере верхнего блока, и проблема решена. Если у верхнего блока float: left, то отступ нижнему задаем слева. Если float: right, то справа. Следует так же учитывать отступы верхнего блок, если таковые имеются.

Проблема вторая.

Это проблема плавающих блоков, помещенных в контейнер. В таком случае контейнер просто «схлопывается» и блоки из него выпадают.


Решений этой проблемы несколько.

Решение первое.

Ниже блока или нескольких блоков со свойством float создаем пустой див и присваиваем ему свойство clear со значением both. Данное свойство прекращает действие свойства float и наши блоки остаются внутри контейнера. Однако при этом у нас на странице появляется лишний элемент, что не есть хорошо.

Решение второе.

. Для контейнера создаем псевдо класс after. Задаем ему пустой контент content: ''; делаем его блочным элементом display: block; и так же прописываем ему clear: both; И в первом и во втором случаях для IE придется прописать отдельный стиль, придав ему свойство hasLayout назначив, к примеру, zoom равный 1 (zoom: 1;).


Решение третье.

Пожалуй, самое универсальное. Назначаем контейнеру свойство overflow со значением hidden. В этом случае проблему доставит только IE6, для которого мы и пропишем отдельный стиль zoom: 1;.


К сожалению данное решение не всегда приемлемо, так что и предыдущие советую взять на заметку.

Видеоверсия поста.


Скачать видео.


Комментариев нет :

Отправить комментарий

Ваш комментарий: