Существуют ли две разные вещи, называемые clearfix?

Я немного смущен тем, что на самом деле представляет собой clearfix. С одной стороны, у нас есть ситуация с div с нулевой высотой, когда плавающий элемент не занимает места. Решение состоит в том, чтобы поместить в контейнер следующий класс clearfix:

.clearfix {
  overflow: auto;
}

С другой стороны, у нас есть clearfix, который, кажется, используется, чтобы избавиться от необходимости ставить <div style="clear: both"></div>, когда вы не хотите, чтобы следующий элемент плавал. Этот прием обычно гораздо более сложен, как следующий из HTML5Boilerplate:

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

Почему эти концепции называются одинаково? Я не говорю о разных решениях одной и той же проблемы, а о двух разных проблемах полностью (исправление div с нулевой высотой по сравнению с устранением необходимости в clear: both div).


html css clearfix
person user2906759    schedule 09.09.2014    source источник
comment
Возможны разные реализации. Но идея все равно та же.   -  person dfsq    schedule 09.09.2014
comment
Меня интересовало Hides from IE-mac, IE на Mac? :П   -  person l2aelba    schedule 09.09.2014
comment
«Audi и BMW выглядят по-разному - так почему же их обоих называют автомобилем?»   -  person CBroe    schedule 09.09.2014
comment
@dfsq, но почему это одна и та же идея, когда они решают две совершенно разные проблемы?   -  person user2906759    schedule 09.09.2014

Ответы (1)


arrow_upward
1
arrow_downward

Да, есть два разных подхода к «очистке».

Более простой подход - просто добавить еще один элемент, использующий стиль clear. Здесь показано со встроенным CSS только для демонстрации:

<div>
  <div style="float:left">...</div>
  <div style="float:left">...</div>
  <div style="float:left">...</div>
  <div style="clear:both"></div>
</div>

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

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

Другой подход для «clearfix» - использовать побочный эффект стиля overflow. Применение overflow (кроме visible) к элементу приведет к тому, что он будет содержать его дочерние элементы, и если вы не укажете размеры для элемента, он все равно получит свой размер из содержимого, и никакого фактического переполнения не будет. Пример:

<div style="overflow:hidden">
  <div style="float:left">...</div>
  <div style="float:left">...</div>
  <div style="float:left">...</div>
</div>

Этот подход немного похож на взлом, но на самом деле это хорошо задокументированный и преднамеренный эффект, поддерживаемый всеми браузерами.

person Guffa    schedule 09.09.2014