Свойства FLOAT

Данное свойство определяет, будет ли блок плавающим, и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.

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

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

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

Ну, вот например, как будут располагаться по умолчанию, три квадратных блока, со стороной в 200 пикселей.

html код:

< div class=" box1" > Первый блок < /div>
< div class=" box2" > Второй блок < /div>
< div class=" box3" > Третий блок < /div>

CSS код:

.box1 {
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;
}

· Смотреть пример boksovaya_model_primer17.htm

Как видите, по умолчанию каждый следующий блок, находится под предыдущим.

Используя свойство float можно сделать так, чтобы каждый блок всплывал влево, т.е. это будет выглядеть так:

.box1 {
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;
}

· Смотреть пример boksovaya_model_primer18.htm

Вот как будет выглядеть, если блоки будут всплывать вправо:

.box1 {
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;
}

· Смотреть пример boksovaya_model_primer19.htm

Классический пример применения – это когда надо сделать, чтобы текст выводился в колонках. Пусть колонки будет три.

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>

· Смотреть пример boksovaya_model_primer20.htm

 

Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR – специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.

· left – блок должен размещаться ниже всех левосторонних плавающих блоков.

· right – блок должен размещаться ниже всех правосторонних плавающих блоков.

· both – блок должен размещаться ниже всех плавающих блоков.

· none – никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.

Ну, допустим, имеется два плавающих влево блока (float: l eft;), которые обтекает текст.

· Смотреть пример boksovaya_model_primer21.htm

Если заключить весь текст в блок, и придать ему свойство 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: 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;
}

· Смотреть пример boksovaya_model_primer22.htm

Заметьте, что в блоках может находиться, что угодно (картинки, списки, текст и др.).

Вот Вам еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.

html-код

< div class=" box1" > Первый блок < /div>
< div class=" box2" > Второй блок < /div>

< p> There is one universal truth in website...< /p>

css- часть

.box1 {
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;
}

· Смотреть пример boksovaya_model_primer23.htm

В общем, вариантов применения может быть много. Экспериментируйте, если хотите.

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