На прошлом уроке мы создали простой каркас на основе float.

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

Сходу получаем такую вот картинку: Все очень даже неплохо, но положение блока Низ (Футер, footer) разражает. По хорошему, его место в самом низу каркаса, но он вслед за блоком Содержание (Контент, content) пошел на верх занимая место плавающих СайдБаров.

Проблему решает свойство clear (отменяет возможность захвата пространства плавающих элементов слева, справа или с обоих сторон), которое мы сейчас и освоим, начав с теории вопроса.

Возможные значения свойства clear

Значение	Пояснение
clear:left;	Не разрешаются плавающие элементы с левой стороны. No floating elements allowed on the left side. Не разрешаются плавающие элементы с левой стороны, а вот с правой стороны - разрешаются.
clear:right;	Не разрешаются плавающие элементы с правой стороны. No floating elements allowed on the right side. Не разрешаются плавающие элементы с правой стороны, а вот с левой стороны - разрешаются.
clear:both;	Не разрешаются плавающие элементы ни с левой стороны, ни с правой стороны. No floating elements allowed on either the left or the right side. Не разрешаются плавающие элементы ни с левой стороны, ни с правой стороны. Другими словами - не разрешаются с обеих сторон.
clear:none;	По умолчанию. Разрешаются плавающие элементы и с левой стороны, и с правой стороны. Default. Allows floating elements on both sides. Разрешаются плавающие элементы и с левой стороны, и с правой стороны. Другими словами - разрешаются с обеих сторон.
clear:inherit;	Значение свойства clear будет унаследовано от родительского элемента. Specifies that the value of the clear property should be inherited from the parent element.

Вот и вся теория по свойству clear, на практике обычно используют пустой блок со свойством clear:both;, например:
<div style="clear:both;"></div>
или же, что больше в духе CSS, создается класс с данным свойством, например, а затем уже этот класс присваивается пустому блоку, например, так: Такой блок помещается в месте, с которого следует отменить обтекание плавающих элементов.

Данные классы в файле стилей CSS будем также использовать в нашем очередном учебном тестовом примере.
css_032_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_032_001.zip ← скачайте пример, чтобы установить на свой сайт...