Свойство float

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

Итак, с помощью свойства float можно заставить текст обтекать изображение. В этом смысле данное свойство можно сравнить с HTML-свойством align. Вот пример:

img {float:left; margin:0 4px 4px 0;}

Это правило выравнивает изображение по левому краю, а текст обтекает его.

Чтобы свойство float сработало, код разметки должен быть примерно следующим (изображение на первом месте):

<img.../>
<p>...абзац...</p>

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

С помощью float можно очень легко создавать колонки. Пользуясь правилами:

p {float:left; width:200px; margin:0;}
img {float::left; margin:0 4px 4px 0;}

мы создали плавающее изображение и плавающую колонку с текстом.

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