CSS: Все про float | нотатки розробника

1. Що таке "float"?
2. Для чого використовується float?
3. Скидання обтікання
4. Великий колапс
5. Техніки скасування обтікання
6. Проблеми з плаваючими елементами

Наша взаимовыгодная связь https://banwar.org/

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

Що таке "float"?

Float це властивість CSS позиціювання. Що б зрозуміти його суть і походження потрібно звернути свою увагу на друкований дизайн. В друкованих макетах зображення може бути розташоване так, що текст обтікає його. Зазвичай це і називається "обтікання текстом".

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

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

Установка властивості float для елементів за допомогою CSS виглядає наступним чином:

#sidebar {float: right; }

Є чотири допустимих значення для властивості float - left, right, none, inherit. Перші два, left і right вказують напрямки розташування - зліва і справа, відповідно. None - значення за замовчуванням, вказує що елемент не плаваючий і inherit вказує елементу успадковувати значення властивості float від батьківського елемента.

Для чого використовується float?

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

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

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

Скидання обтікання

Clear родинне властивість властивості float. Елемент з встановленим властивістю clear не буде рухатися вгору обтікаючи елемент з встановленим властивістю float, але буде зміщуватися вниз ігноруючи обтікання. І знову ілюстрація, яка пояснить все без зайвих слів.

У наведеному вище прикладі, бічна панель "плавала" праворуч від блоку основного контенту. "Підвал" перемістився в вільне місце під бічною панеллю, огинаючи блок з основним контентом. Для вирішення цієї проблеми необхідно вказати значення властивості clear: both "підвалу" для "очищення" обтікання обох стовпців.

#footer {clear: both; }

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

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

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

Але альтернатива такого колапсу ще гірше. Розглянемо наступний сценарій:

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

Про колапсі завжди необхідно пам'ятати, що б запобігти дивну поведінку макета і крос-браузерні проблеми. Ми можемо вирішити цю проблему використовуючи clear після плаваючого елементу в контейнері, але до закриття контейнера.

Техніки скасування обтікання

Якщо ви перебуваєте в ситуації, коли знаєте де буде знаходиться наступний елемент, ви можете використовувати clear: both і займатися далі своїми справами. Це ідеальний варіант, так як він не вимагає ні хаков, ні додаткових елементів. Але на жаль зазвичай не все йде так як ми хочемо і в цьому випадку можна використовувати такі інструменти.

Метод порожнього блоку.

Це в буквальному сенсі порожній блок. <Div style = 'clear: both;'> </ div>. Іноді можна зустріти елемент <br/> або будь-який інший випадковий елемент, але div найбільш поширений оскільки він не має в браузерах стилю за замовчуванням, не має спеціальної функції і навряд чи буде в загальному стилі CSS. Цей метод відкидають семантичні пуристи оскільки його присутність не має контекстного сенсу на сторінці і він розташований там тільки для зовнішнього вигляду. Звичайно, в строгому сенсі вони мають рацію, але він виконує свою роботу і нікому не шкодить.

Метод переповнення.

Заснований на вказівці CSS властивості overflow для батьківського елемента. Якщо це властивість встановлено в auto або hidden для батьківського елемента, то він буде розширяться слідом за плаваючим елементом ефективно скидаючи обтікання його для наступних елементів. Цей метод може бути семантично гарний, так як не вимагає додаткових елементів. Однак, як ви бачите ми додали новий div для використання цього методу, що еквівалентно використанню не семантичного порожнього блоку і менш гнучко. Так само слід пам'ятати, що властивість overflow призначене не для відключення обтікання. Будьте обережні що б випадково не приховати контент або викликати небажані смуги прокрутки.

Метод легкої очищення.

Використовує CSS псевдо-селектор (: after) для видалення обтікання. Замість використання властивості overflow для батьківського елемента встановіть додатковий клас для нього, наприклад 'clearfix' і використовуйте наступний стиль CSS:

.clearfix: after {content: "."; visibility: hidden; display: block; height: 0; clear: both; }

Тут використовується маленький фрагмент контенту прихований від перегляду, розташований після батьківського елемента, який скидає обтікання. Це метод не є повноцінним, оскільки для підтримки старих браузерів його потрібно доробативать.

Різні ситуації вимагають різних методів скидання обтікання. Візьмемо для прикладу сітку різнотипних блоків.

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

Проблеми з плаваючими елементами

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

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

Швидке вирішення проблеми: використовуйте overflow: hidden; для обрізання надлишків.

Баг з подвійними полями (double margin bug) - ще одна річ про яку необхідно пам'ятати працюючи з IE6. Цей баг виражається в тому, що якщо поле знаходиться з тієї ж сторони куди орієнтований float, поле подвоюється. наприклад:

#content {float: left; width: 500px; padding: 10px 15px; margin-left: 20px; }

Ми отримаємо зліва поле в 40 px., Замість 20 px.

Швидке вирішення проблеми: встановити display: inline для плаваючого блоку, і не хвилюйтеся елемент залишиться блоковим.

3х піксельний поштовх (3px Jog). Суть цього бага в тому, що текст розташований поруч з плаваючим елементом дивним чином зміщується на три пікселя, як ніби під вплив силового поля розташованого навколо плаваючого елементу. Швидке вирішення проблеми: встановити ширину і висоту потерпілого тексту.

У IE7 з'являється Баг нижнього відступу (bottom margin bug), коли батьківський елемент є плаваючим і його нащадок розташований всередині нього теж плаваючий елемент. Нижнє поле (margin-bottom) нащадка ігнорується, елементом предком. Швидке вирішення проблеми: Використовувати нижнє поле (padding-bottom) в батьківському елементі, замість нижнього відступу (margin-bottom) нащадка.

Оригінальна стаття: All About Floats