floatВластивість в CSS використовується для позиціонування та розміщення на веб - сторінках.
.module ( float: left; )Цінності
none: елемент не плаває. Це початкове значення.left: плаває елемент ліворуч від його контейнера.right: плаває елемент праворуч від його контейнера.inherit: елемент успадковує плаваючий напрямок свого батька.
display: block;
Що означає поплавок?
Щоб зрозуміти призначення та походження float, ми можемо розглянути дизайн друку. У макеті друку зображення можуть бути встановлені на сторінці таким чином, щоб текст обгортав їх за потреби. Це зазвичай і доречно називається «обтіканням тексту». Ось приклад цього.
У програмах макетування сторінок у вікнах, що містять текст, можна сказати, щоб вони виконували обгортку тексту або ігнорували його. Ігнорування текстового перенесення дозволить словам протікати прямо над зображенням, як би там навіть не було. Це різниця між тим, що зображення є частиною потоку сторінки (чи ні). Веб-дизайн дуже схожий.
У веб-дизайні елементи сторінки із floatвластивістю CSS, застосованою до них, подібні до зображень у макеті друку, де текст обтікає їх. Плаваючі елементи залишаються частиною потоку веб-сторінки. Це суттєво відрізняється від елементів сторінки, які використовують абсолютне позиціонування. Абсолютно розташовані елементи сторінки видаляються з потоку веб-сторінки, наприклад, коли текстовому полі в макеті друку було наказано ігнорувати обгортання сторінки. Абсолютно розташовані елементи сторінки не впливатимуть на положення інших елементів, а інші елементи не впливатимуть на них, незалежно від того, торкаються вони чи ні.
Демо
Ця демонстрація демонструє статтю з двома зображеннями: одне встановлене на float: leftта одне встановлене на float: right. Натисніть кнопку «перемикати поплавці», щоб перемикати та вимикати поплавці.
Див. Приклад Pen Float від CSS-Tricks (@ css-tricks) на CodePen.
Поплавки для макета
Окрім простого прикладу загортання тексту навколо зображень, поплавці можуть використовуватися для створення цілих веб-макетів .
Поплавки також корисні для розміщення в менших випадках. Візьмемо для прикладу цю невелику область веб-сторінки. Якщо ми використовуємо floatдля нашого зображення аватара, коли це зображення змінює розмір, текст у полі буде переформатований, щоб вмістити його:
Цю саму розкладку можна здійснити, використовуючи відносне позиціонування на контейнері та абсолютне позиціонування на аватарі. Але коли це буде зроблено таким чином, аватар не вплине на текст і не зможе переформатувати при зміні розміру.
Демо
Ця демонстрація показує аватар із float: leftзастосованим. Натисніть кнопку «змінити розмір зображення», щоб побачити більш широку версію зображення аватари. Зверніть увагу, що текст переформатовується, щоб вмістити зображення, замість того, щоб бігати над ним.
Дивіться демонстрацію Pen Float від CSS-Tricks (@ css-tricks) на CodePen.
Очищення Float
Власність сестри Флоата - clear. Елемент, у якому встановлено clearвластивість, не рухатиметься поруч із поплавцем, як бажає поплавок, а рухатиметься вниз повз поплавця. Знову ж таки, ілюстрація корисніша за слова:
У наведеному вище прикладі бічна панель розташована праворуч і коротша за основну область вмісту. Потім нижній колонтитул повинен перейти в той вільний простір, який вимагає поплавок. Щоб вирішити цю проблему, нижній колонтитул можна очистити, щоб переконатися, що він залишається під обома плаваючими стовпцями.
#footer ( clear: both; )Clear також має чотири допустимих значення. Значення bothнайбільш часто використовується, який очищає поплавці , що надходять від обох напрямків. Значення leftта rightможуть бути використані для очищення повороту лише в одному напрямку відповідно. Початкове значення - це none, як правило, непотрібне, якщо воно не використовується для явного видалення встановленого clearзначення. Значення inheritзмушує елемент успадковувати батьківське clearзначення. Дивно, але Internet Explorer не підтримував це значення до IE8.
Очищення лише leftабо rightfloat, хоча рідше зустрічається в дикій природі, безумовно, має свої цілі.
Великий крах
Одне з найбільш дивовижних аспектів роботи з поплавцями - це те, як вони можуть впливати на елемент, що їх містить (їхній «батьківський» елемент). Якщо батьківський елемент не містить нічого, крім плаваючих елементів, його висота згортається до нуля. Це не завжди очевидно, якщо батько не містить візуально помітного фону, але важливо пам’ятати про це.
Наскільки б протилежним не здавалося руйнування, альтернатива гірша. Розглянемо такий сценарій:
Якби блок-елемент зверху автоматично розширився для розміщення плаваючого елемента, у нас би відбувся неприродний інтервал між текстами між абзацами, без практичного способу закріплення. Якби це було так, ми, дизайнери, нарікали б набагато сильніше на таку поведінку, ніж на руйнування.
Майже завжди потрібно вирішувати проблеми, що збігаються, щоб запобігти дивному розміщенню та проблемам між браузерами. Ми фіксуємо це, очищаючи поплавок після плаваючих елементів у контейнері, але до закриття контейнера.
Методи очищення поплавків
Якщо ви потрапили в ситуацію, коли ви завжди знаєте, яким буде наступний елемент, ви можете застосувати clear: both;значення до цього елемента і розпочати свою справу. Це ідеально, оскільки не вимагає вигадливих хакерів та додаткових елементів, що робить його ідеально семантичним. Звичайно, все не так працює, і нам потрібно мати більше інструментів для очищення поплавків у нашому наборі інструментів.
- Метод Empty Div - це буквально пустий div.
- Метод переповнення спирається на встановлення
overflowвластивості CSS для батьківського елемента. Якщо для цієї властивості встановлено батьківський елементautoабоhiddenбатьківський елемент, батьківський розшириться, щоб містити плаваючі елементи, ефективно очищаючи його для наступних елементів. Цей метод може бути чудово семантичним, оскільки може не вимагати додаткових елементів. Однак якщо ви виявите, що додаєте новеdivлише для застосування цього, він настільки ж несемантичний, як і порожнійdivметод, і менш пристосований. Також майте на увазі, що властивість overflow не призначена спеціально для очищення поплавків. Будьте обережні, щоб не приховувати вміст і не запускати небажані смуги прокрутки. - Метод легкого очищення (інакше відомий як “clearfix”) використовує розумний псевдоселектор CSS (
:after) для очищення плаваючих знаків . Замість того, щоб встановлювати переповнення для батьків, ви застосовуєте до нього додатковий клас, такий як “clearfix”. Потім застосуйте цей CSS:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )Це застосує невеликий біт вмісту, прихованого від очей, після батьківського елемента, який очищає плаваючу. Це далеко не вся історія, оскільки для розміщення старих браузерів потрібно використовувати додатковий код. Примітка: Також перегляньте цей фрагмент, який відстежує найновіші та найвищі в явних виправленнях, включаючи новіший “мікро-виправлення”.
Різні сценарії вимагають різних методів очищення плаваючого потоку. Візьмемо для прикладу сітку з блоків, кожен з різних типів.
Щоб краще візуально з'єднати подібні блоки, ми хочемо розпочати новий рядок як завгодно, у цьому випадку, коли колір змінюється. Ми могли б використовувати або метод переповнення, або легкий спосіб очищення, якби кожна з груп кольорів мала батьківський елемент. Або ми використовуємо порожній метод div між кожною групою. Три обгортання div, які раніше не існували, або три після div, які раніше не існували. Я дам вам вирішити, що краще.
Проблеми з поплавцями
Поплавці часто отримують удари за неміцність. Більшість цих неміцних ситуацій спричинені помилками IE6 та IE7. Оскільки ці браузери відходять у минуле, ці помилки зникають разом із ними. Але все одно варто їх зрозуміти, якщо вам коли-небудь доведеться налагоджувати “OldIE”.
- Зсув - це ознака того, що елемент всередині плаваючого предмета ширший, ніж сам поплавок (зазвичай це зображення). Більшість браузерів відображатимуть зображення поза поплавком, але не стирчить частина впливає на інший макет. Старі версії IE розширили поплавок, щоб містити зображення, часто різко впливаючи на макет. Поширеним прикладом є зображення, що стирчить із основного вмісту, натиснувши бічну панель унизу.
Швидке виправлення: переконайтеся, що у вас немає жодних зображень, які це роблять, використовуйте,
overflow: hidden;щоб відрізати зайве. - Помилка подвійного поля - ще одна річ, яку слід пам’ятати, маючи справу з IE 6, - це те, що якщо ви застосуєте поле в тому ж напрямку, що і поплавок, це поле подвоїться. Швидке виправлення: встановіть
display: inlineна поплавок, і не хвилюйтеся, він залишиться елементом рівня блоку. - 3px Jog , коли текст , який поруч з переміщуються елементом таємниче ногами геть 3px як дивний силовому навколо поплавка. Швидке виправлення: встановіть ширину або висоту для тексту, на який впливає.
- У IE 7 помилка нижнього поля полягала в тому, що якщо плаваючий батько розміщував дочірні елементи всередині нього, нижнє поле для цих дітей ігнорується батьком. Швидке виправлення: замість цього використовуйте нижній відступ на батьківському.
Альтернативи
Якщо вам потрібно обертати текст навколо зображень, насправді не існує жодної альтернативи float. Говорячи про це, перевірте цей досить розумний прийом обтікання тексту навколо неправильних фігур. Але для макета сторінки, безумовно, є вибір. Ерік Сол має статтю про A List Apart, Faux Absolute Positioning, де описується дуже цікава техніка, яка багато в чому поєднує гнучкість поплавців із силою абсолютного позиціонування.
CSS3 вирішує макет сторінки кількома способами:
- Flexbox
- Макет із кількома стовпцями
- Розмітка сітки
Абсолютно позиціоновані плаваючі позиції (наприклад, ви абсолютно позиціонуєтеся як звичайні, але елемент все одно може впливати на інші елементи, наприклад, обертайте текст навколо нього), але я думаю, що ідея була відкладена через схожість з іншими більш надійними ідеями макета.
Відео
Я давно робив скринкаст, пояснюючи багато з цих концепцій.
Пов’язані
clearposition
Більше інформації
floatу специфікації W3Cfloatна MDN
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Всі | Всі | Всі | Всі | Всі | Всі | Всі |