"Лучшее когда-либо исправление?"

Question

Я видел этот довольно другой метод для 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'а не обязательно будут хотеть clearfix'ed?Или правила таковы, что это будет учитывать любую ситуацию?

Answer 1

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

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

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

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

Это вернется, чтобы укусить вас некоторым образом, я в этом уверен.

Во-первых, я согласен с ответом @ Guffa.

---

Причины крайнего случая против него касаются IE7: http://www.satzansatz.de/cssd/onhavinglayout.html

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

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

---

Лично мне нравится использовать метод overflow: hidden для хранения чисел с плавающей точкой. Когда это не работает , тогда я использую 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;
}

Answer 2

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

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

Answer 3

Are there any disadvantages to this method?

Можно предположить, что в CSS трюках

Answer 4

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

div:after {
    content: "";
    display: table;
}

div:after {
    clear: both;
}

div {
    *zoom: 1;
}

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

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

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

Answer 5

Последние пару лет я очищал все div в глобальном масштабе в своих проектах, и это отлично сработало для меня. Примерно в 95% случаев, когда я использую div, clearfix работает как шарм, когда применяется к сайту во всем мире. Конечно, есть случаи, когда возникает потенциальная проблема, и я заканчиваю тем, что отменяю clearfix для любых проблемных делений. 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;
    }