✨
Эта статья является частью более крупной серии, которая доступна на моем сайте. Нажмите здесь, чтобы узнать больше о CSS 101: The Series. Это совершенно бесплатно!

Добро пожаловать в прошлое! До того, как Flexbox и Grid стали супергероями современного веб-дизайна, было время, когда во вселенной CSS правили плавающие и очищающие элементы. Если вы новичок в веб-дизайне, вам может быть интересно: «Что такое плавающие и очищаемые элементы, и почему меня это должно волновать?» Что ж, пристегнитесь, ведь нам предстоит совершить ностальгическое путешествие по истории CSS.

Спойлер: возможно, сегодня вы найдете несколько крутых трюков!

Поплавки: обманщик оригинального макета

Представьте, что float — это бунтующий подросток из мира CSS, который всегда вырывается из строя и вызывает небольшой хаос. Первоначально плавающие элементы были предназначены для обертывания текста вокруг изображений, но умные разработчики быстро поняли, что их можно использовать и для создания макетов.

img {
    float: left;
    margin-right: 15px;
}

В приведенном выше примере float: left; заставляет изображение «плавать» влево, позволяя тексту обтекать его. Плавающие элементы были популярным выбором для создания многоколоночных макетов до появления Flexbox и Grid. Однако они могут быть немного привередливыми и при неосторожном использовании могут вызвать проблемы с компоновкой.

Клиры: Миротворцы

Поплавки, возможно, были немного мятежными, но клиры были их миротворцами. Свойство Clear похоже на посредника, который вмешивается, чтобы разрешить хаос, который может создать плавающее пространство. Если вы используете числа с плавающей запятой и обнаруживаете, что элементы перекрываются или ведут себя не так, как ожидалось, может помочь очистка.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Добавляя класс Clearfix с приведенным выше CSS, вы гарантируете, что все плавающие элементы содержатся в их родительском контейнере. Это отличный способ предотвратить досадные сбои в макете, когда элементы кажутся уплывающими в пропасть.

Устаревшие методы верстки: возрождение ретро

До того, как Flexbox и Grid привлекли всеобщее внимание, у CSS было еще несколько трюков в рукаве. Вот некоторые классические приемы верстки:

• Inline-Block: простой метод создания горизонтальных макетов. Установив элементы для отображения: inline-block;, вы можете выстроить их рядом без необходимости использования плавающих элементов.

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• Макеты таблиц: Да, таблицы предназначены не только для табличных данных! Вы можете использовать display: table;, display: table-row; и display: table-cell; для создания макетов в виде сетки.

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

Эти методы в значительной степени отошли на второй план современными технологиями верстки, но все же позволяют заглянуть в эволюцию веб-дизайна.

Современное применение: смешивание старого и нового

Итак, имеют ли плавающие и очищающие элементы еще место в мире современного веб-дизайна? Абсолютно! Хотя Flexbox и Grid теперь являются популярными инструментами для создания макетов, плавающие элементы и очистки по-прежнему могут быть полезны в определенных сценариях, например, в простых макетах или при работе с устаревшим кодом.

Например, вы можете использовать float для переноса текста или когда хотите простым способом выровнять небольшое количество элементов. Но для сложных и адаптивных макетов Flexbox и Grid — ваши лучшие друзья.

Подведем итоги

Поплавки, очистки и другие устаревшие методы верстки могут показаться пережитками прошлого, но они являются частью богатой истории CSS. Их понимание даст вам прочную основу и поможет оценить мощь современных систем компоновки. Кроме того, знание этих старых школьных приемов может пригодиться при работе со старыми проектами или причудливыми дизайнерскими задачами (или во время ужасных собеседований).

Удачного программирования!

✨
Псст! Если вам понравилось то, что вы прочитали, нажмите здесь, чтобы ознакомиться с CSS 101: The Series. Это совершенно бесплатно!