1. Що таке "float"? Float - це властивість CSS для позиціонування елементів. Для того щоб зрозуміти...
2. Скасування властивості float
3. великий колапс
4. Способи скасування float
5. Проблеми з float
6. альтернативи float

Що таке "float"?

Float - це властивість CSS для позиціонування елементів. Для того щоб зрозуміти його призначення і походження, можна звернутися до поліграфічного дизайну. У компонуванні при друку, зображення можуть розташовуватися на сторінці так, щоб текст "обтікав" їх. Зазвичай це так і називається: "обтікання текстом".

У програмах для верстки сторінок, елементи з текстом, можуть враховувати зображення, а також і ігнорувати їх. У разі якщо вони будуть проігноровані, текст буде відображатися над картинками, як ніби їх і немає. Це головна різниця між тим, чи є зображення частиною основного потоку сторінки, чи ні. Веб-дизайн дуже схожий.

У веб-дизайні, елементи сторінки з встановленим властивістю float, ведуть себе так само як і зображення в поліграфії, коли текст "обтікає" їх. Такі елементи є частиною основного потоку веб-сторінки. Однак все інакше, якщо елементи використовують абсолютне позиціонування. Абсолютно позиційований елементи видаляються з основного потоку сторінки, подібно наприклад вище, коли в поліграфії текст ігнорує зображення. Такі елементи не впливають на позицію інших елементів, стикаються вони чи ні.

Установка властивості float відбувається наступним чином:

#sidebar {float: right; }

Всього є 4 значення для властивості float. Left і right використовуються для відповідних напрямків. None (за замовчуванням) - забезпечує, що елемент не буде "плавати". І inherit, яке говорить, що поведінка повинна бути таке ж, як і у батьківського елементу.

Для чого можна використовувати float?

Крім обтікання текстом зображень, float може використовуватися для створення макета всього сайту.

Властивість float також корисно і в менших масштабах. Для прикладу розглянемо маленьку область на сторінці сайту. Припустимо ви використовуєте float для аватара, при зміні розміру зображення, текст стає підігнаний відповідно із зображенням.

Таке ж розташування об'єктів може бути досягнуто шляхом використання позиціонування. Об'єкту-контейнеру присвоюється відносне (relative) позиціонування, а об'єкту з зображенням - абсолютне (absolute). В цьому випадку аватар не вплине на становище тексту.

Скасування властивості float

Для float, родинне властивість - clear. Будь-який елемент, у якого встановлено властивість clear, що не буде піднятий вгору, як від нього очікується, а відобразиться нижче, після float-елементів. Можливо, приклад на зображенні пояснить краще, ніж слова.

У прикладі, сайд-бар притиснутий до правого краю (float: right;), а його висота менше, ніж область основного контенту. Тому footer буде піднято вище, оскільки для нього вистачає висоти і цього вимагає поведінку float. Щоб виправити ситуацію, йому необхідно встановити властивість clear, яке гарантує, що елемент виведеться нижче float-елементів.

#footer {clear: both; }

Властивість clear може приймати чотири значення. Both, найбільш використовується, застосовується для скасування float кожного з напрямків. Left і Right - використовуються для скасування float одного з напрямків. None - за замовчуванням, зазвичай не використовується, за винятком випадків, коли необхідно скасувати значення clear. Значення inherit було б п'ятим значенням, але воно дивним чином не підтримується в Internet Explorer. Скасування тільки лівого або правого float, зустрічається набагато рідше, але, безумовно, має свої цілі.

великий колапс

Ще одна дивовижна річ при роботі з властивістю float - це те, що його використання може впливати на батьківський елемент. Якщо такий елемент містить тільки float-елементи, то він буквально схлопивается, тобто його висота дорівнює нулю. Це не завжди помітно, якщо у батьківського елементу не встановлено будь-якої видимий фон.

Таке схлопування виглядає нелогічним, проте альтернатива ще гірше. Розглянемо такий приклад:

Якщо блоковий елемент, розташований нагорі, буде автоматично збільшуватися, щоб вмістити все float-елементи, то ми отримаємо неприродний розрив в тексті між параграфами, без будь-якої можливості це виправити. Якби було саме так, наші дизайнери скаржилися б набагато частіше такій поведінці, ніж хляпанню.

Таким чином, схлопування майже завжди необхідно, щоб запобігти труднощам в верстці. Для того щоб змінити таку поведінку, необхідно додати елемент скасовує float після float-елементів, але до закриття батьківського елемента.

Способи скасування float

Якщо вам відомо, що слідом після float-елементів, завжди буде виводиться будь-якої іншої елемент (наприклад футер), то вам достатньо йому встановити властивість clear: both ;, як в прикладі вище, і займатися далі своїми справами. Це ідеальний варіант, оскільки він не вимагає яких-небудь хаков, або додаткових елементів. Звичайно не все в нашому житті так гладко і бувають випадки коли такого способу не досить. Тому необхідно мати кілька додаткових способів в своєму арсеналі.

І, як ви розумієте, кожен із способів використовується в різних ситуаціях. Візьмемо, наприклад, сітку з блокових елементів, що відрізняються типами.

Для більш кращого візуального представлення було б непогано об'єднати подібні блоки. Наприклад ми хочемо, щоб кожен тип починався з нового рядка, в нашому випадку тип елемента визначається кольором. Ми можемо використовувати метод з overflow або "метод простий очищення", якщо у кожної групи є свій елемент-контейнер. Або ж ми можемо використовувати метод порожнього div-а між кожною з груп. Три елемента-контейнера, або три порожніх div-а, що краще для вашого завдання - вирішувати вам.

Проблеми з float

Float часто намагаються обходити, оскільки працювати з ними треба дуже акуратно. Більшість помилок прийшло разом з IE6. Оскільки все більше і більше веб-дизайнерів відмовляються від підтримки IE6, то вас можуть і не хвилювати ці проблеми. Але для тих, кому не все одно, ось короткий список.

• "Виштовхування" (pushdown). Виникає коли елемент всередині float-елемента виявляється ширше його (зазвичай це зображення). Більшість браузерів обробить такі елементи поза float-структури і верстка НЕ ​​буде зламана. IE розширить елемент, щоб зображення влізло, найчастіше це ламає дизайн. На зображенні представлений приклад, як зображення стирчить з основного контенту і таким чином "виштовхує" сайд-бар вниз. Самий просто спосіб уникнути цього - це перевірити що всі ваші зображення підходять по ширині. Можна використовувати overflow: hidden ;, щоб обрізати виступаючу частину.
• Подвійний зовнішній відступ. Помилка виявляється в IE6, в разі якщо ви встановлюєте зовнішній відступ в тому ж напрямку, в якому у вас вказано float. В цьому випадку відступ подвоюється. Щоб виправити це, необхідно встановити плаваючого (float) елементу властивість display: inline ;, не хвилюйтеся, елемент як і раніше буде блоковим.
• Трьох-піксельний стрибок (3px Jog). Помилка, яка проявляється в такий спосіб: текст, який розташований поруч з float-елементом несподівано з'їжджає на 3 пікселі. Щоб уникнути цього, необхідно встановити ширину або висоту потерпілому тексту.
• У IE7 існує Помилка нижнього зовнішнього відступу (Bottom Margin Bug) - виникає коли елемент з встановленим властивістю float, містить в собі ще один float-елемент. У таких випадках, нижній зовнішній відступ дочірнього елемента ігнорується. Для обходу цієї проблеми необхідно використовувати внутрішній відступ батьківського елемента, замість зовнішнього відступу дочірнього.

альтернативи float

Якщо вам необхідно обтікання картинки текстом, то альтернатив немає. Але для макета сторінки, безумовно є вибір. Існують дуже цікаві підходи, в яких комбінується гнучкість float з міццю абсолютного позиціонування. В CSS3 є, так званий, Модуль розмітки шаблону (Template Layout Module) , Який в майбутньому надасть гідну альтернативу float.