Верстка з float: принцип роботи - підручник CSS

1. Зміна порядку колонок
2. Вкладені float-елементи
3. Трохи про grid-системах

Один з методів створення розмітки веб-сторінок грунтується на властивості float. Ми вивчали його у другому розділі підручника і показували базовий приклад використання float для верстки макету з декількома колонками.

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

Кожна колонка займає ¼, або 25% всієї ширини екрану. Чотири колонки шикуються одна за одною, чітко поміщаючись в один ряд, оскільки їх ширина в сумі становить 100%. Якщо збільшити ширину колонки навіть на одну частку відсотка або додати збоку margin, остання колонка переміститься вниз, оскільки вже не буде поміщатися в батьківський контейнер:

Щоб поміняти колонки місцями, починаючи відлік не зліва направо, а навпаки, потрібно всього лише поміняти значення властивості float з left на right:

Зверніть увагу, що значення властивості clear для елемента #footer ми також змінили на протилежне. В даному випадку, щоб полегшити завдання і позбутися від необхідності змінювати значення властивості скидання обтікання при зміні властивості float, досить записати clear: both - тоді обтікання для футера буде скасовано з двох сторін одразу.

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

Припустимо, якщо ми вкажемо фіксовану ширину 960 пікселів для батьківського контейнера, що містить чотири плаваючих блоку шириною 25% кожен, то ширина одного блоку складе 240 пікселів:

До слова, щоб батьківський блок .container був горизонтально вирівняний по центру, а не прилягав до лівого краю, ми додали до нього властивість margin зі значенням auto. Це скорочений запис, але ви можете добитися того ж ефекту, якщо запишете стилі окремо для лівого і правого полів (тільки вони грають роль в горизонтальному центруванні):

.container {margin-left: auto; margin-right: auto; }

Зміна порядку колонок

Властивість float дозволяє не тільки змінювати візуальний порядок проходження колонок, але і переміщати будь-які з них вибірково. Можна перенести три стовпці вправо, а один - вліво і т. Д. Головне, щоб всіх стовпцях вистачило місця в одному ряду.

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

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

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

На скріншоті нижче показано, яким чином можна змінити порядок проходження HTML-тегів, при цьому зберігши зовнішній вигляд сторінки ідентичним. Ми обернули блок з основним контентом і перший сайдбар в тег <div> з класом .wrapper. Це дало можливість всередині нього поміняти місцями два вищезгаданих елемента.

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

Вкладені float-елементи

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

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

Трохи про grid-системах

Сітка (англ. Grid) використовувалася дизайнерами ще до ери Інтернету. Grid-система - це набір колонок і рядів, які допомагають правильно розмістити елементи макета.

Найпоширеніша grid-система має 12 шпальт однакової ширини, між якими, як правило, є невелика відстань. Така кількість стовпців зовсім не означає, що вам потрібно створювати сайт з дванадцятьма колонками. Ви можете зробити макет з будь-якою кількістю колонок, розділивши 12-колоночную сітку на групи. Припустимо, якщо макет складається з трьох колонок, то можна зробити ці колонки однакової ширини, кожна з яких буде займати 4 шпальти grid-системи. Або під дві колонки відвести половину сітки (6 стовпців), тоді як третя колонка займе час, що залишився простір сітки (ще 6 стовпців).

Приклад того, як виглядає 12-колоночная сітка:

Подібна сітка гнучка і проста у використанні, вона дозволяє створювати різноманітні макети, в той же час дотримуючись загальної вимірювальної схеми. Найчастіше в CSS grid-системах є ряди і колонки, які через класи іменуються як .row і .column (або .col) відповідно. Колонки поміщаються в ряди, а всередину колонок - вміст або вкладені ряди з колонками. Одним з поширених CSS-фреймворків, які використовують grid-систему, є Bootstrap.

Далі в підручнику: проблеми float-елементів .