Доступно про float left і як рівномірно розмістити блоки div на css - приклади

Всі елементи, які зустрічаються на HTML-сторінці є не що інше, як прямокутники. І в основному тільки двох типів:

блокові (blok), які займають всю ширину, де знаходяться, і відокремлені від того, що над і під ними. Наприклад, це теги DIV, P, H.
вбудовані (inline). Наприклад, SPAN, STRONG, EM, A і IMG.

Раніше розмітка сторінок здійснювалася за допомогою таблиць.

Роль властивості float зросла після переходу з table-верстки на div-верстку. Це пояснюється тим, що float дозволяє веб-розробнику включати стовпці не вдаючись до таблиці. Воно може приймати значення right. left. але не center.

За допомогою властивості display: block; або display: inline; ми перетворимо один тип прямокутника в інший. Наприклад, список UL, який має ряд блоків LI, можна розташувати горизонтально:

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

це HEADER h3

Якщо йому задати властивість display: inline ;, то ми побачимо, що змінилася не тільки ширина, але і відстань над і під елементом:

це HEADER h3

Але якщо я хочу розмістити елемент праворуч і додам на цей раз text-align: right ;, то ми отримаємо:

це HEADER h3

І зовсім інакше, якщо float: right ;. Зверніть увагу, що відстань над і під елементом залишилися незмінними:

це HEADER h3

А як поведуть себе елементи, що знаходяться поруч з заголовком?

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

це HEADER h3

А ось червоний текст знаходиться під заголовком і він буде його обтікати, не маючи при цьому ніяких додаткових стилів. І тільки висота h3 буде подолана, сторінка повернеться до природного порядку.

А Б В Г Кілька плаваючих елементів будуть дотримуватися послідовність свого розташування.

АБВГтекст.

А вирівнювання проводиться по самому нижньому краю тих букв, які знаходяться на одній стороні.

А Б В Г Якщо ми ходимо, щоб обтікання елемента було припинено з певного моменту (звідси), застосовується властивість clear. Його ми можемо додати в порожній тег

Для того, щоб рівномірно розмістити кілька блокових прямокутників, задамо їм однакову ширину.