Главная » Все про CSS » Плавающие блоки в CSS (свойство float)

Плавающие блоки в CSS (свойство float)

2014-05-27 / Вр:01:18 / просмотров: 9456

Благодаря так называемым плавающим блокам можно построить любой каркас сайта. Так что, внимательно разберите эту тему.

Свойство FLOAT

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

Значения свойство float:

float: left| right | none;

left - блок прижат к левому краю. Текст будет обтекать справа;

right - блок прижат к правому краю. Текст будет обтекать слева;

none – перемещение блоков выключено (значение по умолчанию).

Давайте теперь посмотрим все на примере.
Есть стандартный код, где все блоки идут без свойства float.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style ENGINE="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
}
.blok3 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45000;
}
 </style>
 </head>
 <body>
<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div>
<div class="blok3">3-ий блок</div>
 </body>
</html>

Результат:

Плавающие блоки в CSS (свойство float)

Теперь воспользуемся свойством float, чтобы прижать 1-ый и 2-ой блок к левой части, а 3-ий блок к правой.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
float:left;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
float:left;
}
.blok3 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45000;
float:right;
}
 </style>
 </head>
 <body>
<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div>
<div class="blok3">3-ий блок</div>
 </body>
</html>

Результат:

Плавающие блоки в CSS (свойство float)

Теперь стоит упомянуть о свойстве CLEAR.

Свойство CLEAR

Благодаря свойству CLEAR блоки можно ставить под блоками. Вы сейчас поймете.

Значения свойства CLEAR:

clear: left | right | both | none;

left - блок будет размещаться ниже всех левосторонних плавающих блоков, и обтекать с левой стороны не будет;

right - блок будет размещаться ниже всех правосторонних плавающих блоков, и обтекать с правой стороны не будет;

both - блок будет размещаться ниже всех плавающих блоков, и запрещать обтекание с обеих сторон;

none – свойство CLEAR отключено (по умолчанию).

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
float:left;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
float:right;
}
.blok3 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45000;
float:right;
}
.blok4 {
padding:10px;
width:222px;
height:100px;
border:1px solid red;
background:#c45450;
float:right;
clear:right;
}
 </style>
 </head>
 <body>
<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div>
<div class="blok3">3-ий блок</div>
<div class="blok4">4-ий блок</div>
 </body>
</html>

Результат:

Свойство CLEAR

А вот, если к третьему блоку добавить ширину 90% и убрать свойство float, то…

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Блок в css</title>
 <style type="text/css">
 .blok1 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#ccc;
float:left;
}
.blok2 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#cc0000;
float:right;
}
.blok3 {
padding:10px;
width:90%;
height:100px;
border:1px solid red;
background:#c45000;

}
.blok4 {
padding:10px;
width:100px;
height:100px;
border:1px solid red;
background:#c45450;
float:right;
clear:right;
}
 </style>
 </head>
 <body>
<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div>
<div class="blok3">3-ий блок</div>
<div class="blok4">4-ий блок</div>
 </body>
</html>

…получится каркас сайта:

Свойство CLEAR

Поздравляю!!! Вы только что закончили самую сложную, но необходимую тему «Блоки в CSS». Закрепите материал на примерах. Потренируйтесь. Поэкспериментируйте.