У минулому уроці ми розглянули основні принципи роботи властивості float. Але, при використанні властивості float можна зіткнутися, наприклад, з наступною проблемою.
Що сталося? Блоковий елемент, який знаходився під елементом з властивістю float: left просто піднявся наверх, на місце, на якому він повинен був би знаходиться якби не було елементу img з властивістю float left.
Як кажуть в цьому випадку, дизайн «зламався». Так не повинно бути, кожен елемент повинен займати своє місце на веб-сторінці.
Щоб вирішити цю проблему потрібно поставити заборону на обтікання для блоку div, який знаходиться в самому низу.
В CSS вирішити цю проблему досить просто, потрібно використовувати властивість clear. Якщо додати це властивість елементу, він перестає обтічні ставитися елементів, яким присвоєно властивість float.
Синтаксис цієї властивості наступний:
none - заборона на обтікання відсутня
left - заборона обтікання по лівій стороні
right - заборона обтікання по правій стороні стороні
both - заборона на обтікання по обом сторонам
inherit - значення успадковується від батьківського елемента
У більшості випадків можна використовувати значення clear: both, щоб не замислюватися з якого боку потрібно зробити заборону на обтікання.
Як бачите, тепер блок встав на своє місце і більше не піддається дії властивості float: left для елемента img.
Властивість clear доводиться досить часто використовувати на практиці, коли на веб-сторінці використовується обтікання об'єктів за допомогою властивості float. Використовуйте це щоб уникнути випадання блокових елементів з нормального потоку при верстці веб-сторінок.
Можливо, вам будуть цікава моя послуга верстки посадочних сторінок. Тоді, натисніть на посилання нижче, щоб дізнатися про це докладніше.