Рейтинг:  3 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда не активнаЗвезда не активна
 

Блоки - Поплавки - float CSS.

На этом уроке рассмотрим ещё один важный момент связанный
с блоками : "Поплавки".

Свойство float CSS 

Используется для размещения блоков в одной строке. Очень часто используется при разработке дизайна современных сайтов. Советую Вам ознакомится с этим важным свойством.

Имеет значения :
left - блок будет прижиматься к левому краю, а текст и всё остальное будет его обтекать справа.
right - блок будет прижиматься к правому краю, обтекание его будет с левой стороны.
none - свойство float выключено.

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

.box1{
height: 100px;
width: 100px;
border: 2px solid blue;}

И так далее для .box2, .box3, и .box4

В HTML напишем:

<div class="box1">БЛОК 1<br>LEFT</div>
<div class="box2">БЛОК 2<br>LEFT</div>
<div class="box3">БЛОК 3<br>RIGHT</div>
<div class="box4">БЛОК 4<br>RIGHT</div>

В блоках напишем значения FLOAT которые зададим позже.
Для наглядности для первых двух напишем слева, а для двух последних справа.

Стрелками указаны места куда переместятся блоки, когда будет задано значение FLOAT.
В итоге получится вот так:

Если в HTML-документе после блоков добавить параграф с текстом, он займёт положение между блоками. Пример:

Что же делать если мы хотим ещё и внизу поставить блоки?

Для этого существует ещё одно свойство.

 

Свойство clear

Это хитрое свойство позволяет ставить блоки под блоками.
Имеет значения:
left - Отменяет обтекание с левого края элемента
right - Отменяет обтекание с правого края элемента
both - размещает блок ниже всех всплывающих блоков и полностью отменяет обтекание заданное свойством float.

Давйте создадим ещё два блока 200х200 пикселей. В CSS добавим стили:

.bigbox1{
height: 200px;
width: 200px;
border: 2px solid blue;
float: right;
clear: right;}


.bigbox2{
height: 200px;
width: 200px;
border: 2px solid blue;
float: left;
clear: left;}

А в HTML :

<div class="bigbox1">Большой БЛОК</div>
<div class="bigbox2">Большой БЛОК 2</div>


Получим вот что:

Структура уже становиться на что-то похожа, неправда ли?

В блоках может находиться, что угодно: текст, списки, картинки, ссылки и т.д.

Тренируйтесь, пробуйте, и всё у Вас получится.

Перейти к следующему уроку: Блочная вёрстка DIV

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!