"Лучшее clearfix когда-либо?"

Я видел этот довольно отличный метод для clearfix: http://www.marcwatts.com.au/blog/best-clearfix-ever/

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

/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
/* our ie CSS file */
article { zoom:1; }
aside { zoom:1; }
div { zoom:1; }
footer { zoom:1; }
form { zoom:1; }
header { zoom:1; }
nav { zoom:1; }
section { zoom:1; }
ul { zoom:1; }

Есть ли недостатки в этом методе? Может ли это привести элементы clearfix'ing, которые вы, возможно, не хотите, чтобы clearfix'ed? Или такие правила, что это будет учитывать любую ситуацию?

5 ответов

Я думаю, что это плохая идея. Вы действительно будете доверять тому, кто, казалось бы, забыл это сделать:

article, aside, div, footer, form, header, nav, section, ul { zoom:1; }

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

Он должен обрабатываться в каждом конкретном случае, а не sledge-hammered на каждый элемент.

Выполнение этого вернется, чтобы укусить вас каким-то образом, я в этом уверен.

С одной стороны, я согласен с ответом @Guffa.

Причина аргумента в отношении края относится к IE7: http://www.satzansatz.de/cssd/onhavinglayout.html

zoom: 1 является распространенным методом для предоставления элементам hasLayout. Применение hasLayout к элементу фиксирует некоторые виды проблем с рендерингом, но также может вызывать другие проблемы. Цитата из связанного документа:

Не давайте макет всем. Яд в этой концентрации, наличие макета - это не лекарство, оно существенно изменяет рендеринг.

Мне лично нравится использовать метод overflow: hidden для размещения float. Когда не работает, я использую clearfix.

Вы должны использовать версию clearfix из http://html5boilerplate.com/:

.clearfix:before,
.clearfix:after {
 content: " "; /* 1 */
 display: table; /* 2 */
}
.clearfix:after {
 clear: both;
}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
 *zoom: 1;
}


Может ли это закончиться clearfix'ing элементы, которые могут не обязательно хотите clearfix'ed?

Да. Я бы не хотел, чтобы каждый элемент div очищался.


Are there any disadvantages to this method?

Одно может быть, что этого будет недостаточно в < IE8, поскольку элемент "после" не поддерживается. Подробнее об этом в CSS трюки


В Cascade Framework, я использую следующее clearfix для всех элементов уровня блока:

div:after {
 content: "";
 display: table;
}
div:after {
 clear: both;
}
div {
 *zoom: 1;
}

Я никогда не сталкивался с какими-либо проблемами с этим методом, за исключением незначительных причуд при использовании сторонних JS-библиотек... которые легко могут быть исправлены с помощью "unclearfixing" родительского элемента.

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

В случаях, когда вы действительно хотите, чтобы родительский элемент с плавающим элементом сбрасывался, альтернативной стратегией было бы использовать display: relative для родителя и display: absolute для дочернего элемента. До сих пор я не сталкивался с каким-либо прецедентом, когда эта стратегия не является подходящей альтернативой свернутым родителям плавающих элементов.


В течение последних нескольких лет я снимал все div в глобальном масштабе в своих проектах, и он отлично работает для меня. Примерно в 95% случаев, когда я использую divs, clearfix работал как шарм при применении к сайту по всему миру. Конечно, есть случаи, когда возникнет потенциальная проблема, и я в конечном итоге уничтожу clearfix для любых проблемных div. Объявления CSS, которые я использую:

div:after {
 clear: both;
 margin: 0;
 padding: 0;
 display: table;
 font-size: 0;
 line-height: 0;
 content: ' ';
 visibility: hidden;
 overflow: hidden;
 }
div {
 *zoom: 1;
 }

licensed under cc by-sa 3.0 with attribution.