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

Содержание раздела:
  1. Свойство float
  2. Свойство float на практике
  3. Пример 1
  4. Пример 2
  5. Практикум

CSS-cвойство float обобщает действие атрибутов align=left и align=right, которые работают только для картинок (и таблиц в некоторых браузерах), на все элементы HTML.

Кратко о свойствах float и clear

При значении float:left элемент-носитель свойства прижимается к границе слева, а остальные элементы обтекают его справа, при значении float:right — наоборот, “прилипание” справа, обтекание слева.

float
Значения: left | right | none | inherit
По умолчанию: none
Область применения: все элементы
Наследование: нет

Свойство clear позволяет прекратить обтекание:

  • clear:left — прекращает обтекание элементов float:left;
  • clear:right — прекращает обтекание элементов float:right;
  • clear:both — прекращает обтекание элементов float:left и float:right.
clear
Значения: left | right | both | none | inherit
По умолчанию: none
Область применения: блочные элементы
Наследование: нет

Свойство clear применимо только к блочным элементам (например, нельзя использовать <BR style="clear:left">, так как элемент BR — строчный).