Сдвигаем картинку

Очистка плавающих элементов: обзор различных методов clearfix

От автора: Очистка плавающих элементов долго была самой распространенной необходимостью во фронт-энд разработке. Не удивительно, что в течение нескольких лет, нам было предоставлено множество техник, известных как методы clearfix. До того, как мы углубимся в различные методы, давайте посмотрим на саму проблему, которую метод clearfix призван решать.

Сценарий: .el-1 и .el-2 – элементы, плавающие бок о бок внутри контейнера, а также есть элемент .main после элемента .container

Желаемый результат: Мы хотим, чтобы .container раскрывался до высоты своих дочерних элементов (то есть до самого высокого из двух .el-1 и .el-2), и мы хотим, чтобы элемент .main был после .container.

Действительный результат: .container сворачивается и не имеет высоты вообще, как будто внутри ничего нет, что ставит .main на нежелательную позицию и потенциально заставляет исчезнуть фоновые изображения и границы, заданные элементу .container.

Основываясь на вышеописанном сценарии, наша разметка должна выглядеть как-то так:

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Тогда наш CSS код будет выглядеть вот так:

Наконец, результат показан на демо ниже:

Глядя на демо и посмотрев на CSS код для элемента .container, вы увидите, что он и вправду свернулся. Вы можете увидеть кусочек черной границы наверху, и нет даже намека на цвет фона. Значит, он не расширяется для того, чтобы помещать .el-1 и .el-2, позволяя элементу .main переместиться в неожиданное место ( в нашем случае под элемент .el-2).

Несмотря на то, что многие считают это багом браузера либо неправильной имплементацией свойства float. Это всего лишь принцип, по которому работают плавающие элементы. Хотя в процессе разработки, во многих случаях для нас он является нежелательным результатом. Что ставит для нас простую задачу – необходимость «очищать плавающие элементы».

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

Свойство “clear”

Свойство CSS clear определяет должен элемент, идущий вслед за плавающим, находиться перед ним или сдвинут вниз (очищен).

Из этого обозначения, становится понятным, что свойство clear может предотвратить наплыв других элементов поверх плавающих… правильно. Теперь перейдем к самим методам.

Решение 1: дедовский способ

Это метод старой закалки. Старая закалка – понятие относительное, и, конечно же, настоящая старая закалка требует использования таблиц для разметки (в случае чего очищение плавающих элементов не нужно). Так что считайте этот метод дедовским, с тех пор как появились плавающие элементы.

Сама суть – очень простая: вставьте пустой элемент, которому задано свойство clear, вниз контейнера, содержащего плавающие элементы. Долгое время использование специального класса для этой цели было традицией, чтобы вы могли его использовать и дальше в вашем HTML. Вот классическая структура:

Источник

Clearfix на CSS

Многие верстальщики слышали о clearfix на CSS. Clearfix — метод отмены действия float без изменения структуры HTML-документа. Данный метод некоторыми верстальщиками весьма активно используется, поэтому я решил о нём Вам рассказать в данной статье.

Давайте разберём такой пример:

Всё бы ничего, но блок «Подвал сайта» оказался то же справа от картинки, а не под ней. Какое решение этой проблемы? Совершенно очевидно, что надо просто добавить ещё один блок, отменяющий действие float:

Теперь всё встаёт на свои места, однако, мы изменили структуру HTML-кода, добавив в него непонятный пустой блок. Так вот clearfix позволяет избежать этого. Никакого блока добавлять не нужно, а достаточно написать в CSS-коде так:

#article:after content: » «;
clear: both;
display: table;
>

Псевдоэлемент after позволяет вывести некий контент после содержимого элемента. Этот контент задаётся в свойстве content. Так же этот контент делается табличным элементом и у него отменяется действие float.

Этот способ работает во всех современных браузерах, поэтому он является кроссбраузерным.

От себя добавлю, что я привык добавлять блок с clear: both; в HTML, но познакомить Вас с clearfix в CSS я тоже считал нужным.

А тем, у кого данная статья вызвала затруднения, рекомендую пройти этот курс. После данного курса Вы без труда сможете сверстать страницу любой сложности.

Создано 14.02.2014 13:31:56

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

Замечательно! Просто и убедительно.

Источник

Очистка float

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

Ширина элементов

Если обтекаемые элементы будет занимать всю доступную ширину, то остальные элементы, следующие за ними, будут начинаться с новой строки. Для этого суммарная ширина элементов должна равняться 100%. В примере 1 показано создание стрелок на одной строке.

Пример 1. Использование width

Каждый блок со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после arrow , начинается с новой строки.

Данный метод применяется редко, поскольку не всегда можно явно указать ширину элементов, к тому же метод не решает проблему с высотой блока и его фоном (рис. 1).

Рис. 1. Нет фоновой заливки

Использование overflow

Свойство overflow управляет отображением содержимого блока, если оно целиком не помещается и выходит за область заданных размеров. Значение auto , в частности, добавляет полосы прокрутки при необходимости, а hidden отображает только область внутри элемента, остальное скрывает. Кроме этого, использование overflow со значением auto , scroll или hidden отменяет действие float (пример 2).

Пример 2. Применение overflow

Результат после применения свойства overflow сразу меняется (рис. 2).

Рис. 2. Влияние свойства overflow на фон

overflow — одно из самых популярных свойств, работающее в связке со свойством float . Но иногда возникают ситуации, когда применение этого метода недопустимо. Это происходит в тех случаях, когда элемент выходит за пределы блока, при этом он будет «обрезан». В примере 3 картинка сдвигается влево от своего исходного положения.

Пример 3. Обрезание области элемента

Результат примера показан на рис. 3.

Свойство clear

Для отмены действия float от вышестоящего элемента применяется свойство clear со следующими значениями:

• left — отменяет действие значения left у float ;
• right — отменяет действие значения right у float ;
• both — одновременно отменяет действие значений left и right у float . Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.

Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после элемента с float . Обычно вводят универсальный класс, к примеру, clearfix и вставляют пустой с этим классом (пример 4).

Пример 4. Использование clear

section < border: 1px solid #000; /* Рамка */ padding: 10px; /* Поля вокруг текста */ >.fig < float: left; margin-right: 10px; >.clearfix

Винни-Пух в гостях у Кролика

В данном примере для класса clearfix установлено свойство clear со значением both .

Использование clear является одним из самых популярных в вёрстке в силу простоты и универсальности. Но иногда возникают комбинации, в которых использование clear даёт сбой. Это происходит, когда в коде встречается одновременно несколько разных обтекаемых элементов. Так, в примере 5 с помощью float создаются две колонки, а в правой колонке float упорядочивает фотографии.

Пример 5. Использование clear

.col1, .col2, footer < padding: 10px; >.col1 < float: left; width: 100px; background: #E8D9A9; >.col2 < margin-left: 120px; background: #ECC0A4; >.photo < border: 1px solid #333; text-align: center; background: #fff; float: left; padding: 10px; >.clearfix < clear: both; >footer

По годам

По рейтингу

По комментариям

Новая строка

Результат примера показан на рис. 4. Свойство clear действует не только на класс photo , но и на класс col1 , т. е. на все элементы выше, у которых установлено float . Поэтому «Новая строка» начинается не сразу же после фотографий, а после завершения левой колонки.

Рис. 4. Ошибка с отображением строки

В подобных ситуациях помогает комбинация разных методов. Так, фотографии можно добавить в контейнер с overflow и удалить clearfix . Колонка приобретёт следующий вид.

Новая строка