Свойство 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 с фиксированной шириной, то получим три плавающих колонки-контейнера, в которые сможем добавлять обычные не плавающие элементы.