Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Плавающие блоки

При помощи плавающих блоков верстается большинство современных проектов и этот сайт не является исключением из правил. Плавающими они названы потому, что могут перемещаться по странице свободно. Такие блоки определяются свойством float. Именно оно говорит, где будет расположен блок и будет ли он плавающим вообще. Свойство float может иметь одно из трёх значений:

  1. left - блок прижимается к левому краю;
  2. right - блок прижимается к правому краю;
  3. none - блок никуда не прижимается, а располагается в нормальном потоке или задаётся при помощи свойства position.

Рассмотрим пример.

.leftblock{
border:1px solid red;
width:100px;
height:50px;
float:left;
}
.rightblock{
border:1px solid red;
width:100px;
height:50px;
float:right;
}

Теперь код самого html-документа.

<html>
 <head>
  <title>Плавающие блоки.</title>
  <link rel="stylesheet" type="text/css" href="style12.css">
 </head>
 <body>
  Это текст на веб-странице.
  <div class="leftblock">Левый</div>
  <div class="rightblock">Правый</div>
 </body>
</html>

Вот что получилось.

Посмотрим теперь, что произойдёт, если будет несколько плавающих блоков, например 2 левых и 2 правых. Ниже код.

<html>
 <head>
  <title>Плавающие блоки.</title>
  <link rel="stylesheet" type="text/css" href="style12.css">
 </head>
 <body>
  Это текст на веб-странице.
  <div class="leftblock">Левый</div>
  <div class="leftblock">Левый</div>
  <div class="rightblock">Правый</div>
  <div class="rightblock">Правый</div>
 </body>
</html>

Посмотрим теперь на результат. Как видно, блоки с левой стороны стоят не друг под другом, а слева направо. С правыми блоками ситуация аналогичная. Но вот чаще надо, чтобы блоки стояли друг под другом. Чтобы это реализовать было изобретено свойство clear, которое может принимать одно из четырёх значений:

  1. left - блок располагается ниже всех левосторонних плавающих блоков;
  2. right - блок располагается ниже всех правосторонних плавающих блоков;
  3. both - блок располагается ниже всех плавающих блоков;
  4. none - на блок не накладывается никаких ограничений относительно других плавающих блоков. Является значением по умолчанию.

Теперь изменим немного таблицу стилей, чтобы разместить наши блоки друг под другом.

.leftblock{
border:1px solid red;
width:100px;
height:50px;
float:left;
}
.leftblock1{
border:1px solid red;
width:150px;
height:100px;
float:left;
clear:left;
}
.rightblock{
border:1px solid red;
width:100px;
height:50px;
float:right;
}
.rightblock1{
border:1px solid red;
width:100px;
height:50px;
float:right;
clear:right;
}

Ну и код html-документа изменится немного тоже.

<html>
 <head>
  <title>Плавающие блоки.</title>
  <link rel="stylesheet" type="text/css" href="style13.css">
 </head>
 <body>
  Это текст на веб-странице.
  <div class="leftblock">Левый</div>
  <div class="rightblock">Правый</div>
  <div class="leftblock1">Левый</div>
  <div class="rightblock1">Правый</div>
 </body>
</html>

Вот теперь посмотрим результат. Как мы видим, блоки слева и справа располагаются друг под другом.


<<Предыдущая | В раздел | Следующая>>