Знакомимся с float

Доброго времени суток всем, в этом уроке мы продолжим изучать CSS, а именно как я и говорил в предыдущем уроке, приступим к флоатам.

Мы научимся выравнивать элементы по левым и правым краям, а также будем способны применять эти возможности не совсем по назначению. Чтобы было понятно как и в каких случаях его лучше использовать, я попробую показать всё на реальных примерах.

Для начала создадим такую мини блочную вёрсточку:

<div id="main">
<div id="content">
<img src="cartinka.JPG" border="0" />

<p>В этом блоке который называется "content" мы будем выравнивать изображение с помошью CSS правила float.</p>

</div>
</div>

Теперь этой нашей мини-вёрсточке зададим некоторые стили:

#main {background-color:#caeaec; width:600px; margin:0 auto 0 auto;

Дальше задаём стиль который касается непосредственно нашей темы:

#content img { float:left; }

После всех этих процедур, осталось посмотреть на результат в браузере:

Вот видите, картинка, которой мы задали свойство float:left, стала обтекаца текстом с правой стороны, если бы задали к примеру float:right, то она соответственно переехала бы направо и обтекаться стала бы с левой стороны.

Выше мы применяли обтекание по назначению, настало время посмотреть, что еще можно вытворять с этим свойством float. Давайте приделаем нашей мини вёрсточке еще один блок и назовём его к примеру lefter.

<div id="main">
<div id="content">
<img src="cartinka.JPG" border="0" />
<p>В этом блоке который называется "content" мы будем выравнивать изображение с помощью CSS правила float.</p>
</div>
<div id="lefter">

Это еще один блок, сейчас мы его попробуем сфлоатить </div>

</div>

Ну и придаём соответствующие классы:

#main {background-color:#fefdfc; width:600px; margin:0 auto 0 auto; }

#lefter {background-color:#eac488; width:200px; float:left;}

#content { width:400px; background-color:#caeaec; float:right; }

Теперь браузер стал отображать нашу вёрстку вот так:

Теперь для пояснения скажу поподробней что мы сделали. Во первых главному блоку main, мы задали цвет белый, чтобы он не отличался от общего белого фона, блоку content, назначили ширину в 400 пикселов чтобы он убрался в основной блок, так как он у нас 600 пикселов, а lefter 200, ну а для чего мы написали свойства float, я думаю вы уже и сами поняли.