... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Схемы позиционирования. Плавающие блоки (стр.1)

 

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки


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

Для того чтобы в CSS реализовать "резиновую" верстку, были придуманы плавающие блоки. Их нельзя позиционировать с точностью до пикселя, как, например, абсолютно позиционируемые. Они могут свободно перемещаться и "прижиматься" к краю своего контейнера. Подобным образом себя ведут рисунки в HTML, для которых задано выравнивание при помощи атрибута align.

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

Свойства FLOAT

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.
  • left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
  • right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
  • none - блок не перемещается (значение по умолчанию), т.е. позиционируется согласно алгоритму, заданному свойством position. Если свойство position не задано, то предполагается нормальный поток.
Рассмотрим пример. Допустим, вы пишете статью, и по ходу необходимо вставлять ремарки или делать комментарии. Можно, конечно, оформить в статье сноски и там дать необходимые комментарии. А можно такие комментарии поместить внутрь плавающего блока, а сам блок разместить рядом с нужным местом в статье.

Создадим такой блок, указав для него свойство float со значением right. Для плавающих блоков всегда надо явно указывать ширину, иначе блок будет растягиваться так, чтобы вместить в себя все его содержимое.



comment {
background:#FFC;
border:1px solid;
padding:5px;
width:150px;
float:right;
}

Теперь разместим в HTML-коде фрагмент текста и блок комментария к статье:

<DIV class="comment">
Плавающий блок может "прилипать" к левой или правой стороне контейнера, сторона задается свойством <EM>float</EM>.
</DIV>
<P></P>

В окне браузера этот код будет выглядеть так, как показано на рисунке - ОТКРЫТЬ. Как видите, теперь можно заставлять внешний текст обтекать не только рисунки, как было в HTML, но и текстовые блоки.

Если изменить значение свойства float с right на left, то блок переместится клевому краю контейнера, которым является сейчас окно браузера - ОТКРЫТЬ.

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки

 

Страница: - 1 - | - 2 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены