|
С
помощью плавающих блоков можно создавать различные эффекты дизайна
страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно
по блочному принципу. Поэтому, очень важно разобраться как это
работает!
Плавающие блоки
в CSS определяются свойством float.
Свойства
FLOAT
Данное свойство
определяет, будет ли блок плавающим и в какую сторону он будет перемещаться.
Свойство может принимать следующие значения:
-
left - структурный блок
перемещается влево. Остальное содержимое документа будет выводиться
вдоль правой стороны блока, начиная с самого верха;
-
right - структурный блок перемещается
вправо. Остальное содержимое документа выводится вдоль левой стороны
блока, начиная с самого верха;
-
none - блок не перемещается (значение по
умолчанию).
Пример:
html код :
<div class="box1">Первый
блок</div>
<div class="box2">Второй
блок</div>
<div class="box3">Третий
блок</div>
CSS код :
.box1
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
}
.box2
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
}
.box3
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
}
нажмите чтобы увидеть результат
По
умолчанию каждый следующий блок, находится под предыдущим.
Используя
свойство float можно сделать так, чтобы каждый блок
всплывал влево.
Пример:
.box1
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:left;
}
.box2
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:left;
}
.box3
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:left;
}
нажмите чтобы увидеть результат
Вот как будет
выглядеть, если блоки будут всплывать вправо.
Пример:
.box1
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:right;
}
.box2 {
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:right;
}
.box3 {
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:right;
}
нажмите чтобы увидеть результат
Классический
пример применения - это когда надо сделать чтобы текст выводился в колонках.
Пусть колонки будет три.
Пример:
CSS код:
.column1
{
float:left;
width: 33%;
}
.column2 {
float:left;
width: 33%;
}
.column3
{
float:left;
width: 33%;
}
В html-коде
просто заключим необходимый текст в соответствующие колонки, тегами
DIV
<div
class="column1">
<p>There is one universal truth in website making: To make a websitet...</p>
</div>
<div class="column2">
<p> If you're like the vast majority of people thinking ...</p>
</div>
<div class="column3">
<p>There is one universal truth in website...</p>
</div>
нажмите чтобы увидеть результат
Говоря о
плавающих блоках, необходимо упомянуть также о свойстве
CLEAR -
специфическое свойство, позволяющее определенным образом позиционировать
плавающие блоки, а именно:
-
left
- блок должен размещаться ниже всех левосторонних плавающих блоков;
-
right - блок должен размещаться ниже всех правосторонних
плавающих блоков;
-
both
- блок должен размещаться ниже всех плавающих блоков;
-
none
- никаких ограничений на положение блока относительно перемещаемых
объектов не накладывается.
Допустим
имеется два плавающих влево блока (float:left;), которые обтекает текст.
Пример:
Если заключить
весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он
размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков
текстом.
html-код
<div
class="box1">Первый блок</div>
<div class="box2">Второй блок</div>
<div class="box3">
<p>There is one universal truth in website...</p>
</div>
CSS-часть
.box1
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:left;
}
.box2
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:left;
}
.box3
{
clear:both;
}
нажмите чтобы увидеть результат
В блоках может находится что угодно (картинки, списки,текст и др.)
Пример, когда один блок располагается под другим, и оба блока обтекаются
текстом.
html-код
<div
class="box1">Первый блок</div>
<div class="box2">Второй блок</div>
<p>There is one universal truth in website...</p>
css- часть
.box1
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:left;
.box2
{
width:300px;
height:300px;
border:1px solid blue;
background-color:Gold ;
float:left;
clear:both;
}
нажмите чтобы увидеть результат
В общем
вариантов применения может быть много.
|