Войти
s-lub » Учебники » CSS » Плавающие блоки (float)

Плавающие блоки (float)

Плавающие блоки (float)

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

FLOAT

С помощью этого свойства зависит как будет отображаться нужный блок относительно других (рядом располагающихся) блоков, может наследовать три значения:

- left – блок будет расположен слева, всё вне блока будет прижиматься к нему справа, начиная сверху, другими словами будет обтекать данный блок.

- right – блок будет расположен справа, всё вне блока будет прижиматься к нему слева, начиная сверху, другими словами будет обтекать данный блок.

- none - блок не перемещается (значение по умолчанию).

Пример №1:
html код :
<div class="block1">Первый блок</div>
<div class="block 2">Второй блок</div>
<div class="block 3">Третий блок</div>

CSS код :
. block 1 { width:200px; height:200px;}
. block 2 { width:200px; height:200px;}
. block 3 { width:200px; height:200px;}

В данном случае свойство FLOAT не задано и блоки будут располагаться один под другим.

Пример №2:
html код :
<div class="block1">Первый блок</div>
<div class="block 2">Второй блок</div>
<div class="block 3">Третий блок</div>

CSS код :
. block 1 { float:left; width:200px; height:200px;}
. block 2 { float:left; width:200px; height:200px;}
. block 3 { float:left; width:200px; height:200px;}

На данном примере блоки будут идти слева на право, в одну линию.

Пример №2:
html код :
<div class="block1">Первый блок</div>
<div class="block 2">Второй блок</div>
<div class="block 3">Третий блок</div>

CSS код :
. block 1 { float: right; width:200px; height:200px;}
. block 2 { float: right; width:200px; height:200px;}
. block 3 { float: right; width:200px; height:200px;}

На данном примере блоки будут идти справа налево, в одну линию.