Управление местоположением контейнеров. Плавающие контейнеры

Ладно, контейнеры — это, конечно, замечательно... Но возникает один очень важный вопрос. Если по умолчанию контейнеры (как и все блочные элементы) располагаются на Web-странице по вертикали сверху вниз, то как мы сможем создать из них колонки, выстроенные по горизонтали слева направо?

Очень просто. Специально для таких случаев CSS предоставляет пару атрибутов стиля, предназначенных для указания местоположения контейнеров. И сейчас мы поговорим о них.

Откроем диалоговое окно Определение правила CSS, в котором задаются параметры стиля, и переключимся на категорию Рамка (см. рис. 11.2), предназначенную для указания параметров размеров и отступов. Казалось бы, здесь нам все уже знакомо. Или не все?..

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

Начнем со списка Float. Он позволяет указать местоположение контейнера по горизонтали. В нем доступны три пункта.

Если выбрать пункт none (или просто очистить список), контейнер будет вести себя как обычно: располагаться ниже своего предыдущего соседа по родителю и выше последующего. Это поведение контейнера по умолчанию.

Если же выбрать пункт left, произойдут две вещи.

1.Контейнер сдвинется к левому краю родителя (например, Web-страницы) и вплотную прижмется к нему. Это можно будет сразу заметить, если контейнер имеет ширину, существенно меньшую, чем ширина родителя.

Если задать этот параметр для нескольких контейнеров, следующих друг за другом, они выстроятся по горизонтали, наподобие ячеек в строке таблицы. То есть мы получим набор колонок, похожий на тот, что представлен на рис. 13.1.

2.Контейнер будет вынесен из основного "потока" текста, и Web-обозреватель не будет принимать его в расчет при вычислении позиции остальных контейнеров, ведущих себя по умолчанию. То есть если выше и ниже контейнера, для которого мы зададим этот параметр, находятся другие контейнеры, ведущие себя по умолчанию, то третий контейнер расположится не ниже второго, а ниже первого.

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