Правильный clearfix

Урок по правильному применению хака clearfix.

Я использую хак clearfix на всех своих сайтах. Он еще известен как «Easy Clearing Hack» — используется для очистки обтекания блоков (div) без использования структурной разметки. Это является очень эффективным в решении вопросов компоновки и несоответствий браузера, без необходимости смешивать структуру с презентацией. В течение последних нескольких лет, я принял к сведению несколько полезных байтов информации относительно метода «Easy Clear». В этой статье я хочу собрать все эти уроки относительно расширенной версии CSS хака clearfix.

Используйте пробел вместо точки, чтобы предотвратить изменение размещения.

Вот реализация этого хака, как представлено в одной из оригинальных статей, описывающих метод:

.clearfix:after {
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* 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

Остерегайтесь дезинформации относительно этого метода.

Нет, я не пытаюсь вас утомить советами предлагаемых в этой статье — вы увидите, что они вполне безобидны. Взамен этого, я имею в виду ошибочную информацию, найденную в другом месте в Интернете и даже в печатном виде. Вот презентация хака 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 * {height: 1%;}
.clearItem { display: block; }
/* Close Commented Backslash Hack */

Ой! Вы видите проблему? На самом деле здесь 2 потенциальные проблемы в .clearItem Mr. Lowery’s. Первая проблема: использование устаревшего значения inline в свойстве display в середине декларации .clearItem:

.clearItem { display: inline; }

..как обсуждалось в оригинальной статье, значение должно быть inline-block — фикс обтекания для IE / Mac:

.clearItem { display: inline-block; }

Вторая проблема: Mr. Lowery’s включает * html .clearItem * селектор в следующей строке:

* html .clearItem, * html .clearItem * {height: 1%;}

Первый селектор в этой линии это все, что требуется для достижения успешного взлома. Второй селектор, однако, эффективно задает высоту до 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 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Заказать сайт