Блочная модель, единицы и float-раскладка

Блочная модель — устройство элемента в CSS как коробки: содержимое, внутренний отступ padding, рамка border и внешний отступ margin.

Каждый элемент это коробка

Для браузера любой элемент на странице прямоугольная коробка. Коробка из четырёх слоёв, как матрёшка, считая изнутри:

1. содержимое (текст, картинка);
2. padding: внутренний отступ от содержимого до рамки;
3. border: рамка;
4. margin: внешний отступ, расстояние до соседей. Он прозрачный и ничего не закрашивает.

Все странности, вроде «я задал ширину 200, а блок получился 250», вырастают отсюда. По умолчанию (это называется box-sizing: content-box) ширина, которую вы пишете, относится только к содержимому, а внутренний отступ и рамка добавляются сверху. Так считали с самого начала, но в 2000-х это так раздражало, что сначала Internet Explorer считал по-другому («по-человечески»), а потом и стандарт признал: можно выбрать box-sizing: border-box, и тогда ширина означает весь блок.

Покрутите ползунки и переключите режим.

Поэтому почти любой стилевой файл начинается так:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Звёздочка * означает «все элементы». Мы задаём border-box корню и просим всех наследовать, и тогда любой блок можно при необходимости вернуть к прежнему.

Единицы: что с чем сравнивается

• px: пиксель. Фиксированный размер, который не зависит ни от чего. Для тонких линий (рамка в 1px) подходит.
• rem: размер шрифта корневого элемента. По умолчанию 16px, но человек может увеличить шрифт в настройках браузера, и все rem вырастут вместе. Поэтому размеры текста и отступов пишут в rem. Так сайт слушается читателя.
• em: размер шрифта текущего элемента. Полезен для отступов, которые должны расти вместе с текстом (например, внутри кнопки), но вложенные em перемножаются, и путаницы много. Начинайте с rem.
• %: доля размера родителя. Для ширины колонок.
• vw и vh: доля ширины и высоты окна. Берите осторожно: на телефоне высота окна меняется при прокрутке.
• ch: ширина цифры «0» в текущем шрифте. Идеальна для ширины строки текста: max-width: 65ch.

Одно из правил, которое стоит запомнить: не задавайте размер шрифта в px у html или body: так вы отменяете настройку читателя.

Float: как делали колонки

Сначала ради картинки в тексте: свойство float: left сдвигает блок к левому краю, а текст обтекает его справа. В середине 2000-х, когда для раскладки были только таблицы, а они давно считались дурным тоном, авторы взяли float и сделали из него колонки: основному блоку float: left, боковому float: right.

У приёма есть цена. Плавающий блок «вынут» из потока, и родитель, в котором лежат одни плавающие блоки, схлопывается до нуля высоты. А подвал, который идёт следом, пытается занять место рядом с колонками. Лечили свойством clear: both у подвала или хитрым «clearfix» у родителя. Попробуйте на схеме: снимите и поставьте галочки.

Был и пик этой моды: в 2006 году статья «In Search of the Holy Grail» (журнал A List Apart) описала, как сделать три колонки: центральная резиновая, боковые фиксированные, а в исходном коде основное содержимое идёт первым. Для этого понадобился десяток хитрых правил, и вся «святость» была в том, что иначе не получалось. Через восемь лет та же задача сводилась к нескольким строкам flexbox. Во всяком старом сайте вы встретите float: теперь вы знаете, откуда он и почему он там.

Практика

Вы в эпохе 2005 года. Ваша страница уже одета, и сейчас она вытянута в одну колонку. Сделайте две колонки на float: так же, как делали тогда. Не пугайтесь, если подвал сначала уедет не туда: исправить это нужно как раз свойством clear.

Сумма ширин колонок в процентах должна быть меньше ста: между ними остаётся зазор. Проценты и rem в этом упражнении не случайны: они позволяют странице растягиваться и сжиматься. Фиксированные ширины в пикселях хуже: страница на телефоне вылезет за экран.

Что было не так с 2005 годом

Колонки на float держались на соглашениях и «хаках»: стоило добавить внутрь колонки слишком широкую картинку, и вся раскладка падала. Фиксированная ширина в 960 пикселей (на экраны 1024 × 768) считалась стандартом, и на телефоне такие сайты приходилось увеличивать пальцами. Вы переделаете этот сайт в эпохе 2014 года, когда придут flexbox, grid и адаптивность.