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



Без плавающих блоков не обходится ни один сайт. Плавающие блоки нельзя позиционировать с точностью до пиксела. но их можно свободно перемещать по странице. Рассмотрим более подробно.

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

Это свойство определяет по какой стороне будет выровнен блок и будет ли он плавающим. Плавающие элементы используются для обтекания объекта (изображение, текст в рамке и т.д.) текстом. Оно имеет следующие значения:

  • right - выравнивает блок по правому краю, а остальные элементы будут обтекать его с левой стороны, начиная с самого верха;
  • left - выравнивает блок по левому краю, а остальные элементы будут обтекать его с правой стороны, начиная с самого верха;
  • none - это значение стоит по умолчанию, блок остаётся на месте;

Создадим три блока.


Пример записи кода:

<style type="text/css"> .blok1,.blok2,.blok3 { width:250px; height:200px; border:1px solid blue; background-color:pink; } </style> <body> <div class="blok1">Первый блок</div> <div class="blok2">Второй блок</div> <div class="blok3">Третий блок</div> </body>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


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


<style type="text/css"> .blok1,.blok2,.blok3 { width:250px; height:200px; border:1px solid blue; background-color:pink; float:left; } </style> <body> <div class="blok1">Первый блок</div> <div class="blok2">Второй блок</div> <div class="blok3">Третий блок</div> </body>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


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


<style type="text/css"> .blok1,.blok2,.blok3 { width:33%; float:left; } </style> <body> <div class="blok1"><p>When you are 16 or 17...</p></div> <div class="blok2">I live in a block of flats...</div> <div class="blok3">Some days ago I celebrated my birthday...</div> </body>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Рассмотрим расположение 2-х плавающих блоков, которые обтекает текст.


<style type="text/css"> .blok1,.blok2 { width:250px; height:200px; border:1px solid blue; background-color:pink; float:left; } </style> <body> <div class="blok1">Первый блок</div> <div class="blok2">Второй блок</div> <div>Some days ago I celebrated my birthday...</div> </body>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Нам необходимо, чтобы в данном примере только 2 элемента располагались на одной строке. Как это сделать? Можно, конечно, пропорционально увеличить ширину каждого из абзацев или сделать шире один из них так, чтобы их общая ширина занимала все свободное пространство, и для следующих элементов не оставалось бы места. Но существует иной вариант...

Для этого к блочным и плавающим элементам применяют свойство clear. Свойство позволяет определенным образом позиционировать плавающие блоки. К свойству clear применяют следующие значения:

  • left - блок должен размещаться ниже всех левосторонних плавающих блоков;
  • right - блок должен размещаться ниже всех правосторонних плавающих блоков;
  • both - блок должен размещаться ниже всех плавающих блоков;
  • none - отменяет действие свойства clear.

<style type="text/css"> .blok1,.blok2 { width:250px; height:200px; border:1px solid blue; background-color:pink; float:left; } .blok3 { clear:both; } </style> <body> <div class="blok1">Первый блок</div> <div class="blok2">Второй блок</div> <div class="blok3">Some days ago I celebrated my birthday...</div> </body>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


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

Далее рассмотрим: Слои в CSS