Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Свойство float чаще всего используется для разметки страницы.
Тем не менее, первоначальная цель float состояла в том, чтобы позволить тексту обтекать объект, что часто встречается в дизайне печати.
Поскольку float часто не используется, как предполагалось изначально, работа с ним может быть немного хрупкой и немного хитрой, пока вы не привыкнете к его причудам.
Сначала мы рассмотрим предполагаемое использование float . Затем мы рассмотрим создание 2-х и 3-х колоночных макетов и в завершение рассмотрим, как справляться с некоторыми хитрыми частями поплавков; очистить их и разобраться с обвалом контейнера.
Использование по назначению
Свойство float принимает 3 значения: left , right или none .
Если мы возьмем изображение и пару абзацев текста и поместим изображение влево, мы увидим предполагаемое использование свойства float в Интернете; текст оборачивается вокруг изображения, и все выглядит великолепно. Мы можем переместить изображение в противоположную сторону, установив float: right или полностью удалив его с помощью float: none которое является значением по умолчанию.
img { float: left; }
2 колонки
Мы можем пойти дальше и разместить два блока контента рядом друг с другом, чтобы получить макет из двух столбцов.
Здесь основной контейнер содержимого имеет ширину 60% и перемещается влево, а его крайний левый край выравнивается по крайнему левому краю его родительского элемента.
Боковая панель имеет ширину 30% и смещена вправо. Между ними есть промежуток в 10%, который обеспечивает некоторое пространство для дыхания.
.main-content { float: left; width: 60%; } .sidebar { float: right; width: 30%; }
3 колонки
Итак, как мы можем сделать макет из 3 колонок?
Когда все серии блоков перемещаются в одном направлении, они совмещаются рядом друг с другом. Это потому, что плавающий элемент выровняет свою левую сторону с крайним левым краем своего родителя или ближайшего плавающего элемента. Если все три блока имеют width 33,333%, и мы используем box-sizing: border-box , мы получаем равную 3-колоночную разметку. Для получения дополнительной информации о box-sizing посмотрите «Эпизод 2: Box-Model ».
.box { -moz-box-sizing: border-box; box-sizing: border-box; width: 33.333%; float: left; }
Мы могли бы достичь тех же трех столбцов, вместо этого поместив поля справа. Но в этом случае первый блок выравнивает крайний правый край с краем контейнера, а затем следующий блок плавает так далеко, как он может идти вправо и так далее. Результат здесь тот же, но с обратным порядком содержимого — что может пригодиться при работе с исходным порядком в адаптивном дизайне.
Очистка поплавков
Другое свойство, которое идет рука об руку с float , clear .
Когда элементы плавают, они заставляют любой соседний элемент пытаться обтекать их, что может привести к тому, что макеты будут выглядеть немного странно. Классический пример — нижний колонтитул под двумя плавающими столбцами.
Давайте возьмем макет из двух столбцов и добавим некоторые размеры и цвета фона, чтобы мы могли видеть, что происходит. Если мы добавим нижний колонтитул ниже столбцов, мы получим немного странное поведение.
Это связано с тем, что нижний колонтитул пытается обтекать два плавающих столбца, а не под ними. Мы можем исправить это, добавив свойство clear в нижний колонтитул, который очищает эффект поплавков с обеих сторон, если установить его для both . Другие доступные значения такие же, как с float — left , right или none .
footer { clear: both; }
Обвал контейнера
Поплавки вызывают другую проблему компоновки, которая иногда может быть трудно увидеть.
Здесь у меня есть раздел с тремя плавающими элементами внутри него. Раздел имеет розовый фон, но он не виден. Если мы проверим элемент в этом разделе, мы увидим, что его высота равна 0.
Поскольку раздел содержит только плавающие элементы, он не может автоматически рассчитать высоту, необходимую для размещения блоков.
Мы могли бы исправить это, добавив четвертый элемент и установив для него свойство clear. Но это неуклюже, и добавление пустого элемента, имеющего чисто визуальное назначение, не является хорошей практикой для написания чистой разметки.
.clear { clear: both; }
Другой вариант — создать новый контекст форматирования блока для раздела, который будет содержать все плавающие в нем.
Свойства float , position , display и overflow могут использоваться для создания нового контекста форматирования блока при использовании определенных значений, но наиболее часто используемый, который предотвращает разрушение контейнера, — это overflow: hidden .
section { overflow: hidden; }
Если мы удалим очищающий <div> и установим overflow: hidden в секции, то разрушение контейнера будет исправлено, и все это будет выглядеть намного менее хакерским.
Однако скрыть overflow элемента не всегда возможно, и любой контент, который намеренно перекрывается или выходит за границы блока, будет скрыт. Более надежный способ справиться с коллапсом контейнера — использовать псевдоэлемент для очистки. Мы будем рассматривать псевдоэлементы в качестве основной темы в Эпизоде 16, но пока приведем удобный фрагмент для исправления коллапса контейнера.
/*source: Nicolas Gallagher*/ /*http://nicolasgallagher.com/micro-clearfix-hack/*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }тем/*source: Nicolas Gallagher*/ /*http://nicolasgallagher.com/micro-clearfix-hack/*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }
Добавив этот фрагмент к вашему CSS и добавив класс .clearfix к элементу, на котором вы хотите предотвратить падение, «невидимый» :after псевдоэлемента выполняет нашу очистку <div> из предыдущего примера.
Теперь мы решаем проблему разрушения контейнера, не сталкиваемся с проблемами скрытого переполнения и сохраняем разметку как можно более чистой, что является беспроигрышным вариантом.
Следите за нашей статьей Quick Tip в ближайшее время!