Розбираємо властивість float в CSS

15

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

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

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

Визначення і синтаксис CSS-властивості Float

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

Розбираємо властивість float в CSS

На зображенні вище розділ «Читачі сайту «.net magazine з 3-ма фотографіями читачів, які вирівняні по лівому краю в своїх стовпцях з обгортанням тексту навколо зображень. Така — основна ідея, що лежить в основі властивості float в схемах розміщення CSS, і вона демонструє один із способів, який використаний у табличному дизайні.

Ефективність використання float в многоколонной верстці була пояснена Douglas Bowman в 2004 в його класичній презентації No More Tables:

Розбираємо властивість float в CSS

Bowman пояснив принципи, що лежать в верстці без таблиць, використовуючи старий сайт Microsoft в якості зразка. Float були помітно використані в його помилкової перебудові розмітки Microsoft.

Синтаксис

Властивість Float може приймати одне з 4 значень: ліворуч (left), праворуч(right), без вирівнювання (none) і наследованное (inherit). Це оголошується, як показано у коді нижче:

#sidebar {
float: left;
}

Найбільш часто використовувані значення це вліво і вправо. Значення none або первісне значення float для будь-якого елемента HTML-сторінки є значенням за замовчуванням. Значення inherit (наслідувати), до якого може бути застосоване майже до кожного властивості CSS, не працює у версіях Internet Explorer, включаючи 7.

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

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

#sidebar {
float: left;
width: 350px;
}

Особливості плаваючих елементів

Нижче наводиться список поведінка плаваючих елементів, згідно специфікації CSS2:

left-floated блок буде зміщений вліво до його лівого краю (або межі краю, якщо край відсутній) стосується або краю змісту блоку, або іншого краю floated блоку

Якщо розмір floated блоку перевищує доступне горизонтальне простір, то floated блок буде зміщений вниз

Non-positioned, non-floated блокові елементи діють, як плаваючі елементи, тобто знаходиться поза потоком документа

Краї floated блоку не співпадуть з краями суміжних блоків

Кореневий елемент() не може бути floated

Вбудований елемент, той який floated, перетворюється в елемент блочного типу

Float на практиці

Найбільш часто використовуваним варіантом використання властивості float є плаваюче зображення з текстом, обертывающим його. Наприклад:

Розбираємо властивість float в CSSPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat діяльності wisi, condimentum sed, commodo vitae, ornare sit amet, діяльності wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

CSS, яка застосовується до зображення в полі вище виглядає наступним чином:

img {
float: left;
margin: 0 15px 5px 0;
border: solid 1px #bbb;
}

Єдине властивість, яка може домогтися такого ефекту роботи це властивість float. Інші властивості (margin та border) є там з естетичних причин. Інші елементи в блоці (теги

з текстом в них) не потребують ні в яких стилях.

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

This box is left floated

This

element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.

У наведеному вище прикладі

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

Текст в абзаці є вбудованим, тому він обволікає floated елемент. Floated блоку також надаються параметри margin, щоб змістити його з абзацу, роблячи його візуально чистим, щоб елемент абзацу ігнорував floated блок.

Очищення floats

Проблеми розташування з floats зазвичай вирішуються використанням CSS властивості clear, яка дозволяє вам «прибрати» floated елементи з лівої або правої або з обох сторін.

Давайте розглянемо приклад, що часто зустрічається — нижній колонтитул (footer) обтікає праву сторону 2-ух клоночной розмітки:

Left column floated left

Right column also floated left

Footer

Якщо ви подивіться на сторінку IE6 та IE7, ви не побачите ніяких проблем. Ліві і праві стовпці на місці, і нижній колонтитул внизу. Але в Firefox, Опері, Safari і Chrome, ви побачити, що нижній колонтитул (footer) з’їжджає зі свого місця. Це викликано застосуванням float стовпців. Це правильна поведінка, хоча воно є більш проблемним. Щоб вирішити цю проблему, ми використовуємо вищезазначене clear властивість, відносно нижнього колонтитула:

#footer {
clear: both;
}

Результат показаний нижче:

Left column floated left

Right column also floated left

Footer

The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.

Властивість clear очистить тільки floated елементи. Застосування clear таке: обидва стовпці не будуть опускати нижній колонтитул, тому що він не floated елемент.

Тому користуйтеся clear на не — floated елементах, і навіть іноді на floated елементах, щоб змусити елементи сторінки зайняти свої відведені місця.

Фіксація Випадання батьків

Один з найбільш загальних ознак розмітки з float, є «випадання — батька». Це продемонстровано на прикладі нижче:

Розбираємо властивість float в CSSPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Зверніть увагу, що підстава floated зображення з’являється за межами свого батька. Батько повністю не розширюється, для утримання floated зображення. Це викликано тим, що ми обговорювали раніше: floated елемент поза природного потоку документа, хоча всі елементи блоку відображаються, але floated елемента там як би немає. Це не помилка CSS, все у відповідності зі специфікаціями CSS. Всі браузери роблять те ж в цьому прикладі. Потрібно сказати, що в цьому прикладі, додаючи ширину контейнера можна запобігти проблему в IE, але потрібно рештиь проблему і для Firefox, Opera, Safari, або Chrome.

Рішення 1:Float для контейнера

Найпростіший спосіб вирішення цієї проблеми є float для батьківського елемента:

Розбираємо властивість float в CSSPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

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

Рішення 2: Додавання Додаткової Розмітки

Це — застарілий метод, але це найпростіший варіант. Просто додайте додатковий елемент в нижню частину контейнера і «очистити» його. Ось як HTML-код буде виглядати після реалізації цього методу:

Розбираємо властивість float в CSS

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

І в результаті CSS застосовується до нових елементів:

.clearfix {
clear: both;
}

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

Рішення 3: Псевдо-елемент after

:after псевдо-елемент додає якийсь елемент до виконаної сторінки HTML. Цей метод використовувався досить широко, щоб вирішити проблеми float-clearing. Ось як виглядає CSS:

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

Клас CSS «clearfix» застосовуємо до будь-якого контейнера, який має дочірні елементи з float і не розширюється, щоб включити їх.

Але цей метод не працює для Internet Explorer 7 версії, тому для IE потрібно застосувати один з наступних варіантів:

.clearfix {
display: inline-block;
}
.clearfix {
zoom: 1;
}

В залежності від типу проблеми ви маєте справу з одним з двох рішень, які дозволять цю проблему в Internet Explorer. Слід зазначити, що властивість zoom не є стандартом властивостей Microsoft і тому ваш CSS стане не валідним.

Так, як псевдо — елемент :after не працює в IE6/7, отримуємо трохи роздутий і складний код, і потрібен додатковий неприпустимий тільки для IE стиль, тому це рішення не є найкращим способом, але ймовірно, краще, з тих, що ми розглядали дотепер.

Рішення 4: Властивість Overflow

Безумовно, кращий і найпростіший спосіб вирішити проблему з випаданням батьків додати overflow: hidden або overflow: auto до батьківського елементу. Це ясно, легко підтримується, працює майже у всіх браузерах і не додає зайвої розмітки.

Зауважте, що я сказав «майже» у всіх браузерах. Це пояснюється тим, що він не працює в IE6. Але, у багатьох випадках, батьківського контейнера буде встановлена ширина, яка усуває проблему в IE6. Якщо батьківського контейнера немає ширини, Ви можете додати IE6-єдиний стиль з наступним кодом:

// Fix This is for only IE6
.clearfix {
height: 1%;
overflow: visible;
}

В IE6, властивість height неправильно розглядати як min-height, таким чином, це змушує контейнер включити свої дочірні елементи. Властивість Overflow потім встановлюється назад в «visible», щоб гарантувати, що вміст не приховано або пролистано.

Єдиний недолік у використанні overflow методу (в будь-якому браузері) є можливість того, що зміст елемента буде мати смуги прокрутки або приховає інформаційне наповнення. Якщо є які-небудь елементи з негативними margin або з абсолютним позиціонуванням в батьків, то вони будуть приховані, якщо вони виходять за межі батька, тому цей метод слід використовувати обережно. Потрібно також зазначити, що, якщо б у міститься елемента була б зазначена height або min-height, то Ви напевне не змогли б використовувати метод overflow.

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

Пов’язані float помилки в Internet Explorer

За ці роки мали місце численні статті, опубліковані в мережі, обговорюють загальні помилки, пов’язані з float в CSS розмітці. Всі вони, що не дивно, мають справу з проблемами, характерними для Internet Explorer. Нижче Ви знайдете список посилань на ряд статей, які обговорюють пов’язані з float проблеми:

The Internet Explorer Guillotine Bug

The IE5/6 Doubled Float-Margin Bug

IE7 Bottom Margin Bug

The IE Escaping Floats Bug

The IE6 Peekaboo Bug

The IE6 «Ghost Text» Bug

The IE6 Expanding Box Problem

The IE6 3-pixel Gap

Зміна властивості float за допомогою JavaScript

Щоб змінити значення CSS JavaScript, ви повинні отримати доступ до стилю об’єкта, перетворюючи намічене властивість CSS в «Camel case» Наприклад, властивість CSS «margin-left» стає marginLeft, властивість background-color стає BackgroundColor, і так далі. Але з властивість float, все по іншому, тому що слово float вже зарезервированно в JavaScript. Тому наступне буде неправильним:

myDiv.style.float = «left»;

Замість цього, ви повинні використовувати одну з наступних дій:

// For Internet Explorer
myDiv.style.styleFloat = «left»;
// For all other browsers
myDiv.style.cssFloat = «left»;

Практичне використання Float

Floats можуть бути використані для вирішення цілого ряду завдань в CSS розмітці. Деякі приклади описані тут.

2-колонки, фіксованої ширини

Roger Johansson в 456 Berea Stree викладає 8 навчальних кроків для створення простого кроссбраузерного, горизонтального центрування 2-стовпців. Властивість float є складовою частиною розташування цієї розмітки.

“Розмітка складається з заголовка, горизонтальної навігаційної панелі, стовпця основного змісту, бічного і нижнього колонтитула. Все це також горизонтально по центру у вікні браузера. Досить типовий макет і його зовсім не важко створити з допомогою CSS після того, як ви знаєте, як боротися з неминучими помилками Internet Explorer»

Розбираємо властивість float в CSS

Простий макет CSS на 2 стовпця

3 стовпця, Схема розміщення Рівної висоти

Petr Stanicek з pixy.cz демонструє розмітку з 3 стовпців кроссбраузерна, знову-таки використовуючи float:

“Ніяких таблиць, ніякого абсолютного позиціонування (ніякого позиціонування взагалі), жодної нудної роботи (!),однакова висота всіх стовпців Ліва і права колонки фіксованої ширини (150px), середня — тягнеться.»

Розбираємо властивість float в CSS

Схема розміщення на 3 стовпця з CSS

Floated зображення з заголовоком.

Подібно до того, що ми обговорювали раніше в рамках «Float на практиці», Max Design описує, як float зображення з заголовком, дозволяє тексту обернутися навколо нього природно.

Розбираємо властивість float в CSS

Плаваючі Зображення і Заголовок

Горизонтальна навігація з невпорядкованими списками

Властивість float — ключовий компонент в кодуванні заснованих на спрайте горизонтальних навігаційних панелей. Chris Spooner з Line25 описується створення Menu of Awesomeness, в якому теги

  • , утримують кнопки навігації, використовують float: left:

    Розбираємо властивість float в CSS

    Як створити меню CSS за допомогою спрайт зображення

    Щоб продемонструвати важливість властивості float в цьому прикладі, ось скріншот того ж самого зображення після використання firebug для видалення the float: left:

    Розбираємо властивість float в CSS

    Grid-Based фото галереї

    Просте використання властивості float це float:left серії фотографій, що містяться в неупорядоченном списку, яке отримує той самий результат, що Ви могли б побачити в табличній розмітці.

    Розбираємо властивість float в CSS

    Сторінка продуктів Foremost canada’s (див. зображення вище) відображає свої продукти в форматі сітки, поруч з боковою колонкою. Фотографії відображаються у вигляді неупорядкованого списку із властивістю float, для всіх

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

    Розбираємо властивість float в CSS

    На Paragon Furniture’s futons page (див. зображення вище) інший приклад сторінки продуктів, де використовується ненумерованний список з floated тегами

  • .

    Розбираємо властивість float в CSS

    На iStockphoto’s search results page (див. зображення вище) таже сітка, структурованих фотографій, тут фотографії містять float:left

    теги, а не

  • теги.

    Вирівнювання поля з кнопкою

    Моделювання за замовчуванням елементів форми для різних браузерів може бути проблематичним. Часто в одному полі форми, такому як форма пошуку, необхідно поставити елемент поруч з кнопкою «відправлення».

    В будь-якому браузері, результат один і той же: кнопка трохи вище, ніж поле вводу. Зміна margin і padding нічого не дають. Простим рішення є встановити плаваюче поле ліворуч і додати маленький margin праворуч. Ось результат:

    Висновок

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

    Сподіваємося, що це обговорення роз’яснило деякі таємниці, пов’язані з float в CSS, і показало деякі практичні вирішення низки проблем, з якими стикаються розробники CSS сьогодні.

    Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

    E-mail: [email protected]

    Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

    P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.