Clearfix
Проблема проявляется когда float элемент находится внутри контейнера и автоматически не принимает его высоту.
Поскольку элемент — float то он физически перестает находиться внутри родителя что соответственно приводит к описыной выше ситуации.
Вы можете использовать два следующих метода чтобы это исправить:
Как только вы поймете что собственно происходит — используйте данный метод для исправления ситуации.
Исходный код для webtoolkit.clearfix.css
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }
Как использовать clearfix в CSS?
Clearfix — вспомогательный псевдоклас помогающий нам разрешать ситуации со схлопывающейся высотой у родительского div’a когда внутри него расположенный плавающие элементы например с float:left.
Как его использовать?
Самый распространённый пример использования данного псевдокласса с поддержкой начиная с IE6 выглядит следующим образом:
.clearfix < zoom: 1; >.clearfix:before, .clearfix:after < content: ""; display: table; >.clearfix:after
Более современный и короткий вариант применяющийся например в Bootstrap поддерживается IE8+ имеет следующий вид:
.clearfix:after
Так же альтернативным решением может стать overflow:auto или overflow:hiden
Очистка 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.
Рис. 3. Обрезание картинки
Свойство clear
Для отмены действия float от вышестоящего элемента применяется свойство clear со следующими значениями:
- left — отменяет действие значения left у float ;
- right — отменяет действие значения right у float ;
- both — одновременно отменяет действие значений left и right у float . Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.
Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после элемента с float . Обычно вводят универсальный класс, к примеру, clearfix и вставляют пустой с этим классом (пример 4).
Пример 4. Использование clear
Винни-Пух в гостях у Кролика
В данном примере для класса clearfix установлено свойство clear со значением both .
Использование clear является одним из самых популярных в вёрстке в силу простоты и универсальности. Но иногда возникают комбинации, в которых использование clear даёт сбой. Это происходит, когда в коде встречается одновременно несколько разных обтекаемых элементов. Так, в примере 5 с помощью float создаются две колонки, а в правой колонке float упорядочивает фотографии.
Пример 5. Использование clear
По годам
По рейтингу
По комментариям
Результат примера показан на рис. 4. Свойство clear действует не только на класс photo , но и на класс col1 , т. е. на все элементы выше, у которых установлено float . Поэтому «Новая строка» начинается не сразу же после фотографий, а после завершения левой колонки.
Рис. 4. Ошибка с отображением строки
В подобных ситуациях помогает комбинация разных методов. Так, фотографии можно добавить в контейнер с overflow и удалить clearfix . Колонка приобретёт следующий вид.
Псевдоэлемент ::after
Частое включение пустого элемента со свойством clear захламляет код, особенно при активном использовании свойства float . Логично перенести всё в стили, избавившись от лишних элементов. Для этого воспользуемся псевдоэлементом ::after, который в комбинации со свойством content добавляет пустой текст после содержимого элемента. К такому тексту можно применить стилевые свойства, в частности clear .
Вместо значения block у display иногда вставляют значение table , но смысл это не меняет, так же как и набор других возможных свойств. Их задача — создать невидимый блок, который будет отменять действие float у вышестоящих элементов.
Поскольку текст, генерируемый через псевдоэлемент ::after , располагается после содержимого элемента, он с лёгкостью заменяет конструкцию . Там, где она требуется достаточно только добавить класс clearfix , как показано в примере 6.
Пример 6. Псевдоэлемент ::after
Удобство приведённого метода заключается в использовании класса clearfix , который при необходимости добавляется к любому элементу.
Правильный clearfix
Я использую хак clearfix на всех своих сайтах. Он еще известен как «Easy Clearing Hack» — используется для очистки обтекания блоков (div) без использования структурной разметки. Это является очень эффективным в решении вопросов компоновки и несоответствий браузера, без необходимости смешивать структуру с презентацией. В течение последних нескольких лет, я принял к сведению несколько полезных байтов информации относительно метода «Easy Clear». В этой статье я хочу собрать все эти уроки относительно расширенной версии CSS хака clearfix.
Используйте пробел вместо точки, чтобы предотвратить изменение размещения.
Вот реализация этого хака, как представлено в одной из оригинальных статей, описывающих метод:
.clearfix:after < content: "."; display: block; height: 0; clear: both; visibility: hidden; >.clearfix /* Hides from IE-mac \*/ * html .clearfix .clearfix /* End hide from IE-mac */
Обратите внимание на строку, содержащую свойство content: «.»;. Я обнаружил что точка в кавычках имеет неприятную склонность к нарушению изменение размещения. При добавлении литерала точка после .clearfix блока (в ie, через .clearfix:after селектор) хак создает ошибку в некоторых браузерах. И не только для Internet Explorer — в зависимости от расположения, даже Firefox будет тупить после отключения :after — на основе псевдо-точки. Нужно решение этого беспорядка? Заменить точку на простой пробел: content: » «; — эта хитрость оказалась вполне успешной, что я теперь использую это свойство во всех своих clearfix-ах.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
/* drop the dot, replace with space */ .clearfix:after < content: " "; display: block; height: 0; clear: both; visibility: hidden; >. . .
Добавить нулевое свойство font-size чтобы сделать все гладко.
Другая странная несовместимость замеченная в clearfix-е — расположение пропадает, когда свойство CSS font-size, находящееся в хаке устанавливаетя в ноль:
/* zero font-size added to prevent potential layout issues */ .clearfix:after < content: " "; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; >. . .
Конечно, это может быть излишним при использовании пробела вместо символа «точка» (как описано выше), но я, честно говоря, не беспокоюсь об этом. Оглядываясь назад, я думаю что может быть сделать это решение до открытия фикса пробела. Тем не менее, некоторые браузеры обрабатывают пробел как текст, так что это все же может оказаться полезным. Возможно да, возможно нет — я собираюсь бросить его для всех вас CSS-гуру.
Остерегайтесь дезинформации относительно этого метода.
Нет, я не пытаюсь вас утомить советами предлагаемых в этой статье — вы увидите, что они вполне безобидны. Взамен этого, я имею в виду ошибочную информацию, найденную в другом месте в Интернете и даже в печатном виде. Вот презентация хака clearfix, описанная в превосходной книге Joseph W. Lowery’s «CSS Hack & Filters»:
.clearItem:after < content: "."; clear: both; height: 0; visibility: hidden; display: block; >.clearItem < display: inline; >/* Start Commented Backslash Hack \*/ * html .clearItem, * html .clearItem * .clearItem < display: block; >/* Close Commented Backslash Hack */
Ой! Вы видите проблему? На самом деле здесь 2 потенциальные проблемы в .clearItem Mr. Lowery’s. Первая проблема: использование устаревшего значения inline в свойстве display в середине декларации .clearItem:
.clearItem
..как обсуждалось в оригинальной статье, значение должно быть inline-block — фикс обтекания для IE / Mac:
.clearItem
Вторая проблема: Mr. Lowery’s включает * html .clearItem * селектор в следующей строке:
* html .clearItem, * html .clearItem *
Первый селектор в этой линии это все, что требуется для достижения успешного взлома. Второй селектор, однако, эффективно задает высоту до 1% для всех версий браузеров Internet Explorer. Это отстой — я узнал на собственном опыте: через месяц или около того, используя эту версию хака, я обнаружил, что около половины моих посетителей (т.е. те, кто использует IE) не смогли оставить комментарии, потому что все поля формы были только 1 пиксель высотой! К счастью, это не заняло слишком много времени, чтобы выявить виновника ошибки: гнусный подстановочный знак (*) селектора CSS .clearItem — как видно в коде выше. После удаления второго селектора, все срослось.
Так в чем мораль этой истории? Просто! Всегда дважды проверяйте ваш код и думайте, прежде чем тупо скопировать и вставить. Даже профессиональные писатели и программисты делают ошибки, так что обязательно обратите внимание и не делайте никаких предположений.
А теперь все вместе…
Складываем все вместе и объединяем эти уроки с исходной (правильной) версией «Easy Clear Method», мы видим — полностью функциональное решение хака clearfix:
/* slightly enhanced, universal clearfix hack */ .clearfix:after < visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; >.clearfix < display: inline-block; >/* start commented backslash hack \*/ * html .clearfix < height: 1%; >.clearfix < display: block; >/* close commented backslash hack */
..и, снято! Надеюсь, вам было так же весело, как я сделал в процессе написания этой статьи.. если нет, то надеюсь что в этом раунде “извлеченных уроков” представлены некоторые полезные сведения о вездесущем и полезном хаке clearfix.
И наконец — этот пост посвящен CSS и я не ожидаю ничего хорошего, только самой суровой критики идей, изложенных в данном документе. — Валяйте, все вы сумасшедшие CSS-головы!)))
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.