CSS плаває пояснюється в 5 питаннях

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

Цей пост охоплює п'ять основних питань, які допоможуть вам стати експертом у плаваючих елементах.

1. Які елементи не плавають?
2. Що відбувається з елементом, коли він плаває?
3. Що відбувається з братами і сестрами "Floats"?
4. Що відбувається з батьком "Float"?
5. Як очистити "Поплавці"?

Для читачів, які додають ТЛ, до підходу до життя, є підсумок біля кінця посади.

1. Які елементи не плавають?

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

2. Що відбувається з елементом, коли він плаває?

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

Плавучі елементи також не піде вище елементів раніше це в коді, що потрібно розглянути перед кодуванням a “Float” після елемент, на бік якого ви хочете плавати.

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

(1) Вбудований елемент перетвориться на елемент рівня блоку коли плавали.

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

(2) Блоковий елемент невизначеної ширини скорочуватиметься відповідно до його вмісту під час плавання.

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

3. Що відбувається з братами і сестрами «Плаває» \ t?

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

"Поплавці" мають найбільш піклуючих і слухняних пізніше братів і сестер у всьому світі. Вони будуть робити все, що в їх силах, щоб розмістити плаваючий елемент.

The текст і вбудовані елементи буде просто звільнити місце для "Поплавців" і оточити "Поплавок" коли він знаходиться в положенні.

The блокові елементи піде далі і буде обгортатися навколо "Float" щедро, навіть якщо це означає вигнання власних дочірніх елементів, щоб зробити місце для "Float".

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

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

Все буде добре, як тільки червона коробка перестане охоплювати синю коробку і за що ви можете використовувати overflow: hidden.

Коли ви додаєте overflow: hidden до елемента, який обертає поплавок, він перестане це робити. Дивіться нижче, як поводиться червоне поле overflow: hidden.

4. Що відбувається з батьком "Float"?

Батьки не піклуються про своїх «плаваючих» дітей, крім того, що вони не повинні виходити зі своїх лівих або правих кордонів.

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

5. Як очистити "Поплавці"?

Я вже згадував про використання overflow: hidden зробити батьківську висоту розміщенням плаваючої дитини, створюючи потрібний простір для інших елементів після "Float" і щоб зупинити братів і сестер від обтікання "Float".

І саме так ви робите елемент жити біля "Float" без компромісів.

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

ясно: ліворуч; ясно: право; ясно: обидва; 

зліва Значення очищає всі "Floats" ліворуч від елемента, і навпаки для право, і з обох сторін обидва. Це ясно атрибут може використовуватися для брата, порожнього div або псевдоелемента відповідно до вашого зручного.

Резюме

1. Абсолютні / фіксовані елементи не будуть плавати.
2. "Float" не перевищує елемент раніше це в коді.
3. Якщо в контейнері не вистачає місця, "Float" буде відкинуто вниз.
4. Всі "Поплавці" виконані в елементи блочного рівня.
5. Якщо ширина не вказана на "Float", вона зменшиться до вмісту.
6. Пізніші брати та сестри "Float" будуть або оточуватимуть їх (вбудовані та текстові), або переносять їх (блоки).
7. Щоб припинити перенесення елемента "Float", використовуйте overflow: hidden.
8. Батьки «поплавця» не збільшать свою висоту, щоб відповідати поплавцям.
9. Щоб зробити батьком збільшення своєї висоти відповідно до "Float", використовуйте overflow: hidden (або створіть порожній брат з ясно після нього)
10. Щоб запобігти розташуванню елемента біля будь-якого "Float", використовуйте ясно атрибут.