1. визначення float
2. поведінки floats
3. In the clear
4. Застосування floats в макетах
5. Float first
6. Collapsing
7. висновок

Властивість Float це значимий і потужний актив для web-developer-ів працюють з HTML і CSS. C іншого боку, він може викликати одне розчарування і плутанину якщо ви не до кінця розумієте як це властивість працює.

Переклад статті CSS Floats 101. оригінал alistapart.com

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

Ми бачимо float кожен день в світі друку, коли розглядаємо статтю в журналі із зображенням розташованим зліва чи справа і текстом красиво розташованим навколо нього. У світі HTML / CSS, текст буде обгортати зображення в залежності від властивості float, яке застосовується до цього зображення. Використання властивості float до зображення, це все лише один з багатьох прикладів. Ще як приклад, за допомогою властивості float, ми можемо дуже легко зробити популярний двоколонковому макет. А насправді, ви можете застосовувати властивість float до будь-якого елементу в вашому HTML. Вивчивши і зрозумівши застосування властивості float, разом з властивістю position , Ви зможете комфортно і впевнено себе почувати при створенні будь-якого макета.

визначення float

Давайте почнемо з визначення, що таке float.

Float це умовно коробка, яка рухається вправо або вліво по поточній лінії. Найцікавіша характеристика float в тому, що контент може обтікати уздовж його боку. При застосуванні властивості float: left, контент буде обтікати коробку вниз з правого боку і аналогічно при float: right - вниз з лівого боку.

Властивість float має 4 значення, які ми можемо застосовувати: left, right, inherint і none. Кожне значення досить зрозуміло. Наприклад, якщо ви використовуєте float: left до елементу, то він переміститься в крайню зліва кордон щодо свого батьківського елемента. І, якщо ви зададітеfloat: right, то елемент аналогічно переміститься в право. Значення ihnerit говорить елементу успадкувати властивість від свого батьківського елемента. І останнє значення none є значенням за замовчуванням і говорить не застосовувати властивість float до даного елементу.

ось простий приклад A обтікання тексту навколо зображення і нижче відповідний CSS:

img {float: right; margin-top: 10px; }

поведінки floats

Нічого складного, але все ще не до кінця зрозуміло? Перш ніж ми перейдемо в світ float-ів, давайте повернемося трошки назад, щоб обговорити що насправді відбувається. У світі web, наш HTML пов'язаний декількома правилами, зокрема правило нормального потоку. При нормальному потоці, кожен блоковий елемент (div, p, h1, etc) розташовується вертикально один над одним, починаючи з верхньої частини вікна і далі вниз. Елементи з властивістю float вилучаються з нормального потоку і відправляються в крайній правий або лівий край свого батьківського елемента. Іншими словами, вони перестають розташовуватися один над одним і стають один біля одного, кажучи що в батьківському елементі достатньо місця щоб розташується поруч всіх елементів з властивістю float. Важливо пам'ятати дану поведінку при будівництві вашого сайту.

Давайте розгляне ще один приклад B , В ньому три блоки без застосування властивості float.

.block {width: 100px; height: 100px; }
Звернули увагу що всі блоки розташовані вертикально один над одним? Це і є концепція нормального потоку. нижче черговий приклад C , Тільки цього разу до елементів ми застосуємо властивість float: left. .block {float: left; width: 100px; height: 100px; }
Тепер блоки розташовані одна біля одної. Відмінно, ми отримали те, в чому розбиралися. Але як щодо тієї частини, де я сказав "кажучи що в батьківському елементі достатньо місця щоб розташується поруч всіх елементів"? Я думав ви ніколи не спитаєте мене про це. Давайте візьмемо наш останній приклад і збільшимо кількість блоків в п'ять разів. У нашому випадки, body є батьківським елементом наших блоків. Зауважте, що в залежності від розмірів вікна вашого браузера. блоки переносяться на наступну Сточки, так як їм мало місця, щоб розташовуватися один біля одного. Якщо ви будете міняти розмір вікна вашого браузера, то і блоки будуть автоматично перебудовуватися. Спробуйте самі, ось вам приклад D .

In the clear

Властивість float має "зведеного-брата" clear. Вони настільки доповнюють одна одну, що можуть вас зробити щасливим програмістом. Як ви пам'ятаєте, елемент із властивістю float перший, хто вилучається з нормального потоку. Це означає що кожен елемент, який буде йти за float-ed елементом, буде вести себе не так, як ви очікуєте. І тут, я підозрюю, у нас можуть початися проблеми. Давайте швидко подивиться на черговий приклад з нашими блоками. В прикладі Е я задам властивість float двом блокам (рожевий і синій) і відразу після них додам ще два блоки (зелений і помаранчевої) без float. Нижче код до даного наприклад Е : <Div class = "block pink float"> </ div> <div class = "block blue float"> </ div> <div class = "block green"> </ div> <div class = "block orange" > </ div> .block {width: 200px; height: 200px; } .Float {float: left; } .Pink {background: # ee3e64; } .Blue {background: # 44accf; } .Green {background: # b7d84b; } .Orange {background: # E2A741; }

Як вам зелений блок? Зачекайте, де він? Він тут, захований під рожевим блоком. Рожевий і Синій блоки обидва мають властивість float і поводяться так, як ми очікували, тобто розташовані одна біля одної. Але так як вони були вилучені з нормального потоку, то зелений і помаранчевий блоки ведуть себе так, як ніби їх (рожевого і синього) взагалі немає на сторінці. Ось чому наш зелений блок захований під рожевим. Отже, як же нам тепер знову показати наш зелений блок? Вказати властивість clear.

Властивості clear є п'ять значень: left, right, both, inherit і none. Значення left скасовує обтікання з лівого краю цього елемента. Аналогічно при clear: right; - скасовує обтікання цього елемента з правого краю. Використовуючи both значення скасовує обтікання елемента одночасно з правого і лівого краю. При значенні inherit властивість clear успадкує значення від свого батьківського елемента, а значення none (за замовчуванням) скасовує дію властивості clear і обтікання елемента відбувається так, як задано за допомогою інших. Озброївшись цими знаннями давайте поглянемо на приклад Е2 . Цього разу ми застосували властивість clear до нашого зеленого блоку. Наш трошки змінений код тепер виглядає так:

<Div class = "block pink float"> </ div> <div class = "block blue float"> </ div> <div class = "block green clear"> </ div> <div class = "block orange" > </ div> .block {width: 200px; height: 200px; } .Float {float: left; } .Clear {clear: left; } .Pink {background: # ee3e64; } .Blue {background: # 44accf; } .Green {background: # b7d84b; } .Orange {background: # E2A741; }

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

Застосування floats в макетах

Давайте перейдемо до макетів. Це місце, де властивість float неймовірно корисно. Ми можемо створити традиційний двоколонний макет декількома шляхами; більшість з них складаються з одного або двох елементів з властивістю float. Давайте розглянемо простий приклад: двоколонний web сайт з контент колонкою праворуч і навігацією зліва, а також хедер (header) і футер (footer) на довершення всього. У цій статті ми будемо звертати увагу на код, тільки пов'язаний з float-ed елементами. ось приклад F :

#container {width: 960px; margin: 0 auto; } #Content {float: left; width: 660px; background: #fff; } #Navigation {float: right; width: 300px; background: #eee; } #Footer {clear: both; background: #aaa; padding: 10px; }

Ще один приклад , Якщо кому цікаво погратися.

Добре, давайте тепер поговоримо про те, що тут відбувається. Наш батьківський контейнер має мітку (id) #container. Він зберігає в собі наші floated елементи. Якби його не було, то наші floated елементи розташувалися б по найдальших краях вікна перегляду, зліва і справа. Наступним ми створили блоки #content і #navigation. Це наші елементи до яких ми будемо застосовувати властивість float. Ми відправили наш #content вліво і #navigation вправо, щоб отримати двоколонний макет. Я вказав ширини блоків, тому вони заповнили весь простір нашого батьківського контейнера. І нарешті ми створили #footer, якому ми встановили clear властивість. Як нам вже відомо, це властивість повертає елементи наступні за floated елементами в нормальний потік. В даному випадку, наш #footer має значення clear: both, що має в своєму розпорядженні його нижче обох елементів #content і #navigation.

А що станеться якщо ми не вкажемо clear властивість нашого #footer? Погляньте на цей приклад G .

Наш #footer прилип під блоком #navigation. Це сталося, тому що під блоком #navigation є місце для #footer і для нормального потоку розташування блоків це правильна поведінка. Але, це абсолютно не те що нам потрібно, чи не так? Припускаю ви вже бачите взаємозв'язок між float і clear і розумієте як вони доповнюють один одного.

Якщо у вас одержимо-маніакальне розлад, як у мене, ви могли помітити в приклад F різні висоти стовпців #content і #navigation; є кілька способів вирішення, але це виходить за рамки даної статті. Настійно рекомендую почитати Faux Columns автора Dan Cederholm щоб вивчити як зробити однакової висоти блоки, в не залежності від контенту всередині.

Float first

До сих пір ми бачили деякі досить прості приклади, які не створюють багато головного болю. Є, однак, кілька підводних каменів, які потрібно враховувати при використанні властивості float. Дивно, але один з найбільших підводних каменів пов'язаний не з CSS, а більше з HTML. Помістивши ваш floated елемент всередину вашого HTML може привезти до різних результатів. Погляньте на приклад H .

Тут ми маємо маленький блок, який має картинку з властивістю float: right і текстом оточуючим її. Наш CSS виглядає так:

#container {width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid # 999; } Img {float: right; }

Наш батьківський елемент #container має вузьку ширину і утримує наш floated елемент (зображення) всередині своїх кордонів. Наш HTML код виглядає так:

<Div id = "container"> <img src = "image.gif" /> <p> This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right. </ P> </ div>

Цей приклад дає нам бажаний результат, але що якщо візьмемо і переставимо місцями деякі елементи в HTML? В прикладі I я перемістив <img> після тексту <p>:

<Div id = "container"> <p> This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right. </ P> <img src = "image.gif" /> </ div>

Наш результат не той, який очікувався. Наше зображення пересунулася вправо, але вже не знаходиться в верхньому кутку як ми хочемо, а впало вниз під параграф; навіть гірше, воно стирчить з нижньої частини нашого батьківського елемента #container. Що відбувається?

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

По-друге. Причина по якій зображення здається стирчить внизу з нашого блоку #container, пов'язана з чимось під назвою collapsing (деформація). Давайте поговоримо про collapsing і варіанти вирішення.

Collapsing

Collapsing це коли елемент, який має будь-яку кількість floated елементів, які не розширять свої межі навколо вкладених елементів, як це відбувається якби вкладені елементи не були floated.

В прикладі I , Наш батьківський елемент #container деформований, як ніби floated img елемента взагалі немає всередині. Це не помилка браузера, а очікуване і правильне поводження. Оскільки елементи з властивістю float спочатку були додані в нормальному потоці а потім видалені, то блок #container не враховує їх усередині своїх кордонів і поводить себе наче їх навіть не існує.

Примітка. Eric Meyer написав прекрасну статтю Containing Floats , Яка більш детально розбирає дану поведінку і є дуже корисною.

Доброю новиною є те, ми можемо вирішити цю проблему в безліччю способів; якщо ви припускаєте, що це пов'язано з властивістю clear, то ви на правильному шляху.

Один з найпоширеніших метод виправити деформацію батьківського блоку це помістити елемент з clear: both властивістю після нашого floated елемента. Це призведе до того, що батьківський елемент продовжить нормальний порядок після floated елемента. Буде простіше показати це на дії. Погляньте на HTML для Прімера J , Який аналогічний попередньому прикладу, тільки з одним додатковим елементом:

<Div id = "container"> <p> This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right. </ P> <img src = "image.gif" /> <div style = "clear: right;"> </ div> < / div>

Додаючи div з стилем clear: right нам вдалося змусити наш #container обгорнути наше floated зображення шляхом перерахунку його висота, так як тепер внизу ще один елемент. Дане рішення працює, але воно може бути не самим елегантним рішенням, так як нам потрібно додати додатковий елемент в нашу розмітку. Було б краще впоратися за допомогою CSS. Є кілька шляхів вирішення і давайте поглянемо на одне з них прям зараз.

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

<Div id = "container"> <img src = "image.gif" /> <img src = "image.gif" /> <img src = "image.gif" /> </ div>

CSS:

#container {width: 260px; margin: 0 auto; padding: 10px 0 10px 10px; background: #aaa; border: 1px solid # 999; } Img {float: left; margin: 0 5px 0 0; }

Подивившись на код вище, ви швидко здогадаєтеся, що наш батьківський елемент не містить floated зображення. І знову, це було очікувано, тому так floated елементи вилучаються з нормального потоку і відповідно наш батьківський елемент #container буде порожнім. Погляньте на приклад До .

Тепер давайте спробуємо виправити це за допомогою CSS замість додавання додаткової HTML розмітки в наш документ, як ми це робили раніше. Існує метод, які дозволяє батьківського елементу "застосувати" властивість clear після всіх floated елементів. Для цього використовується CSS властивість overflow із значенням hidden. Візьміть до уваги що властивість overflow не було призначене для такого використання і може стати причиною виникнення деяких проблем, таких як приховування контенту або поява небажаного скроллбар. Для нашого прикладу, проте, ми все ж застосуємо властивість overflow: hidden до нашого батьківського елементу #container:

#container {overflow: hidden; width: 260px; margin: 0 auto; padding: 10px 0 10px 10px; background: #aaa; border: 1px solid # 999; }

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

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

В даному випадки, за допомогою CSS, ми додаємо новий елемент в наш батьківський елемент #container і задаємо йому значення hidden і heigh: 0. Ви можете знайти дуже ретельний і докладний огляд цієї техніки на сайті Position is Everything .

І наостанок, Eric Meyer пояснює третій варіант вирішення даної проблеми в своїй статті Containing Floats . Відповідно CSS Spec 2.1:

елемент із властивістю float буде розширювати свої межі для floated елементів знаходяться всередині.

Таким чином, застосовуючи властивість float до # container, наш контейнер буде містити в собі наше зображення і параграф, аналогічно описаним вище методам.

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

висновок

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

Для закріплення матеріали радимо тест знань CSS-Основи і CSS-Середній рівень .