Начало
Урок 14: Плавающие блоки(свойство float)
В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, мне кажется , что очень важно разобраться как это работает!
Итак, Плавающие блоки в CSS определяются свойством float.
Свойства FLOAT
Данное свойство определяет, будет ли блок
плавающим и в какую сторону он будет перемещаться. Свойство может
принимать следующие значения.
right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
none - блок не перемещается (значение по умолчанию).
Ну вот например, как будут располагаться по умолчанию ,три квадратных блока, со стороной в 200 пикселей.
html код :
<div class="box2">Второй блок</div>
<div class="box3">Третий блок</div>
CSS код :
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
Как видите, по умолчанию каждый следующий блок, находится под предыдущим.
Используя свойство float можно сделать так, чтобы каждый блок всплывал влево, т.е. это будет выглядеть так:
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
Вот как будет выглядеть, если блоки будут всплывать вправо:
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
Классический пример применения - это когда надо сделать чтобы текст выводился в колонках. Пусть колонки будет три.
CSS код:
float:left;
width: 33%;
}
.column2 {
float:left;
width: 33%;
}
.column3 {
float:left;
width: 33%;
}
В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV
<p>Es gibt eine universelle Wahrheit in Website Erstellung ...</p>
</div>
<div class="column2">
<p> Wenn Sie wie die überwiegende Mehrheit der Menschen ...</p>
</div>
<div class="column3">
<p>Es gibt eine universelle Wahrheit in Making Website ...</p>
</div>
Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.
- left - блок должен размещаться ниже всех левосторонних плавающих блоков.
- right - блок должен размещаться ниже всех правосторонних плавающих блоков.
- both - блок должен размещаться ниже всех плавающих блоков.
- none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.
Ну допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.
Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.
html-код
<div class="box2">Второй блок</div>
<div class="box3">
<p>Es gibt eine universelle Wahrheit in Website Erstellung ...</p>
</div>
CSS-часть
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box3 {
clear:both;
}
Заметьте, что в блоках может находится что угодно(картинки, списки,текст и др.)
Вот Вам еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.
html-код
<div class="box2">Второй блок</div>
<p>Es gibt eine universelle Wahrheit in Website Erstellung ...</p>
css- часть
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
clear:both;
}
В общем вариантов применения может быть много. Экспериментируйте, если хотите.
См. также
Следующий - Урок 15: Слои в CSS
Предыдущий - Урок 13: Позиционирование блоков
