BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

Свойство FLOAT

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

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

float: left| right | none;

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

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

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

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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;
}
.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" "http://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" "http://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" "http://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». Закрепите материал на примерах. Потренируйтесь. Поэкспериментируйте.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136