В этой статье мы рассмотрим плавающие блоки, на данный момент большинство сайтов строятся иммено с помощью них, дизайн этого сайта тоже построен в основном из плавающих блоков.
FLOAT
С помощью этого свойства зависит как будет отображаться нужный блок относительно других (рядом располагающихся) блоков, может наследовать три значения:
- left – блок будет расположен слева, всё вне блока будет прижиматься к нему справа, начиная сверху, другими словами будет обтекать данный блок.
- right – блок будет расположен справа, всё вне блока будет прижиматься к нему слева, начиная сверху, другими словами будет обтекать данный блок.
- none - блок не перемещается (значение по умолчанию).
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 не задано и блоки будут располагаться один под другим.
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;}
На данном примере блоки будут идти слева на право, в одну линию.
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;}
На данном примере блоки будут идти справа налево, в одну линию.
- Основы CSS
- Что такое CSS
- Как подключить таблицу CSS к документу HTML
- Синтаксис CSS
- Фон и цвет в CSS
- Шрифты в CSS
- Текст в CSS
- Списки в CSS
- Ссылки в CSS
- Типы селекторов в CSS
- Блоковая модель в CSS
- Рамки в CSS
- Поля и отступы в CSS
- Высота и ширина в CSS
- Позиционирование блоков
- Плавающие блоки
- Слои в CSS
- Заключение, правильное написание, образцы.