CSS плаває, пояснюється їздом на ескалаторі

Якщо ви коли-небудь стрибали на ескалаторі, то ви можете швидко зрозуміти поплавці.

Ваш

майже ідеальний. Ви вирішили ввести кілька поплавків, щоб виправити зв’язок між декількома елементами.

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

Я особисто провів години, намагаючись повністю зрозуміти поплавки. Я прочитав статтю і сказав: "О, це має сенс!". Тоді я повернусь до свого коду, спробуйте його і ... не вдасться. Назад до дошки для малювання.

Я зроблю все можливе, щоб пощадити вас від цієї долі.

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

Насправді поплавці досить схожі на динаміку катання на ескалаторі, і я збираюся показати, як їх можна використовувати поряд із чіткою властивістю для створення кристально чистих відносин у дивах. Таким чином, наступного разу, коли ви спробуєте використовувати floats у своєму коді, ви не зіткнетесь із жодними сюрпризами.

Треба поважати смугу пропуску

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

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

Це сценарій, коли ви взагалі не використовуєте float.

Гаразд, зараз ми говоримо! Люди, які демонструють певний рівень обізнаності. Люблю бачити це.

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

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

Поплавці: ліворуч і праворуч

Використання поплавків може ввести до двох нових потоків: лівий і правий.

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

Поплавці дозволяють створити ці нові відносини між потоками.

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

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

Очистити властивість

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

На першому знімку розділу «Поплавці» два гонщики ескалатора ввічливо стояли з кожного боку ескалатора. Це дозволяє іншим проходити їх і вільно рухатися за бажанням.

Скажімо, що замість одного плаваючого лівого елемента та одного плаваючого правого елемента ми натомість мали 3 плаваючих лівих елемента та 1 праворуч. Три плаваючі ліві елементи зіставлятимуться в рядку зліва, якщо ми також надамо їм властивість «ясно: зліва». Але якщо вони горизонтально вирівняні з плаваючим правим елементом, це може зробити дуже важким або навіть неможливим проходження нормального потоку елементів:

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

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

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

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

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

Якщо вам сподобалася ця публікація, вам можуть сподобатися інші мої пояснення складних тем CSS та JavaScript, такі як позиціонування, модельний перегляд-контролер та зворотні виклики.

І якщо ви думаєте, що це може допомогти іншим людям, що знаходяться в такому ж становищі, як і ви, дайте йому «серце»!

Цей пост спочатку з’явився у блозі CodeAnalogies.