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

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

При помощи плавающих блоков верстается большинство современных проектов и этот сайт не является исключением из правил. Плавающими они названы потому, что могут перемещаться по странице свободно. Такие блоки определяются свойством 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-документа.


 


  Плавающие блоки.
  
 
 
  Это текст на веб-странице.
  
Левый

  
Правый

 

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

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


 


  Плавающие блоки.
  
 
 
  Это текст на веб-странице.
  
Левый

  
Левый

  
Правый

  
Правый

 

Посмотрим теперь на результат. Как видно, блоки с левой стороны стоят не друг под другом, а слева направо. С правыми блоками ситуация аналогичная. Но вот чаще надо, чтобы блоки стояли друг под другом. Чтобы это реализовать было изобретено свойство 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-документа изменится немного тоже.


 


  Плавающие блоки.
  
 
 
  Это текст на веб-странице.
  
Левый

  
Правый

  
Левый

  
Правый

 

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


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