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

В CSS плавающие блоки определяются свойством float.

Свойства FLOAT

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

  • left – структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
  • right – структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
  • none – блок не перемещается (значение по умолчанию).

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

html код :

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

CSS код :

.box1 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
}
.box2 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
}
.box3 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
}

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

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

.box1 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:left;
}
.box2 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:left;
}
.box3 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:left;
}

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

.box1 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:right;
}
.box2 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:right;
}
.box3 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:right;
}

А теперь сделаем что бы текст выводился в колонках. Сделаем три колонки.

CSS код:

.column1 {
float:left;
width: 33%;
}
.column2 {
float:left;
width: 33%;
}
.column3 {
float:left;
width: 33%;
}

В html-коде просто вписываем нужный текст в соответствующие колонки, тегами DIV

<div>
<p>There is one universal truth in website making: To make a websitet...</p>
</div>

<div>
<p> If you're like the vast majority of people thinking ...</p>
</div>

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

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

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

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

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

html-код

<div>Первый блок</div>
<div>Второй блок</div>

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

CSS-часть

.box1 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:left;
}
.box2 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:left;
}

.box3 {
clear:both;
}

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

А вот пример когда блоки друг под другом и обтекают текстом

html-код

<div>Первый блок</div>
<div>Второй блок</div>

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

css- часть

.box1 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:left;
}
.box2 {
width:300px;
height:300px;
border:1px solid green;
background-color: #FF6633;
float:left;
clear:both;
}

Ну думаю тут все понятно. Вариантов расположения блоков уйма, так что пробуйте.