редактировать: я бы не стал рассматривать это как огромный взлом или обходной путь - этот метод использовался годами в различных воплощениях (обычно известный как метод 'clearfix'), и я не думаю, что он скоро исчезнет.

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

Насколько я понимаю, поплавки никогда не создавались для создания макетов, но поскольку многим макетам нужен нижний колонтитул, именно так их часто используют. Чтобы очистить поплавки, вы можете добавить пустой div, который очищает обе стороны (div class = "clear"). Это просто и работает в разных браузерах, но добавляет «несемантический» html вместо решения проблемы представления в CSS.

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

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

 Alec15 янв. 2011 г., 18:33
«Чтобы очистить числа с плавающей точкой, вы можете добавить пустой div, который очищает обе стороны (div class =" clear ")" - до тех пор, покаdiv.clear { clear: both; }.

Ответы на вопрос(3)

а популярная версия взлома неоправданно многословна и сложна.

Вы можете получить эффект очистки, применяяoverflow:hidden в контейнер. Если контейнер не имеет фиксированной высоты, он все равно будет растянут до размера содержимого. Это не хак, ноуказанное поведение это работает во всех браузерах.

И когда вам действительно нужноoverflow:visible Вы все еще можете очистить без дополнительного элемента в разметке:

 .container::after {
    content:"";  /* not "."! */
    display:block;
    clear:both;
 }

и это совершенно стандартный CSS 2.1. В версиях IE, которые не поддерживают CSS 2.1,hasLayout бывает желаемый эффект:

 .container {
    zoom:1;
 }
 sevenseacat15 янв. 2011 г., 18:49
zoom - недопустимый CSS, и почему вы должны остановиться и подумать, какую технику использовать? Просто используйте один и применяйте его везде, где это необходимо.
 Kornel15 янв. 2011 г., 22:54
Зачем останавливаться и думать? Потому чтоoverflow:hidden Он настолько короткий, простой и эффективный, что его стоит использовать по возможности. Многословие типичного clearfix заставляет авторов выбирать жесткий код этого класса в разметке, что противоречит идее стиля разделения и разметки.zoom:1 действительно нестандартно, но и безвредно. При желании вы можете скрыть его под каким-либо селектором IE / условным комментарием.
Решение Вопроса

кто их не понимает. Если вы знаете все плюсы и минусы, сделайте свой звонок.

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

Ваше решение плохое, потому что оно изменило содержимое документа, вставив элемент C, единственное назначение которого - визуальное разделение между A и B. Содержимое не должно служить цели макета.Решение Карпи немного хуже (в моей книге), потому что оно делает то же самое хитрым способом. Псевдоэлемент ": after" не был предназначен для этого. Однако у него есть большое преимущество - он никогда не меняет HTML.Решение PorneL обеспечивает желаемое разделение между A и B путем радикального изменения свойств A. Это изменение не только отделит A от B, но также отделит A от предшествующего содержимого, изменит способ вычисления ширины A и так далее. Конечно, иногда это совершенно нормально, но вы должны знать об этих неожиданных побочных эффектах.

Выбор за нами.

 Frank17 янв. 2011 г., 18:25
Спасибо, я согласен, что все методы имеют проблемы и в основном используют элементы так, как они не были предназначены (семантически правильно или нет). Помимо примера clearfix, я вижу, что некоторые крупные сайты, такие как Twitter, используют таблицы для макета, форм и т. Д. Я уверен, что они знают, что это не лучшая практика, но я уверен, что это связано с очень практичным проблемы, связанные с кросс-браузерными проблемами, старыми браузерами, использованием полосы пропускания и т. д.

и только для очистки div.

Я предпочитаю групповой подход - положитьclass="group" на родительском элементе div со следующим CSS:

/* Clear groups of floats by putting class="group" on their parent */
.group:after 
{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; 
}

И в специфичной для IE таблице стилей для IE6 / 7:

/* IE7 */
.group
{
    min-height: 1px;
}

/* IE6 */
* html .group
{
    height: 1%;
}

Это было подробно описано в CSS Mastery Энди Баддом. Это немного растягивает семантику, но имеет смысл - вы группируете плавающие элементы div, которые, очевидно, имеют некоторое отношение друг к другу.

редактировать: я бы не стал рассматривать это как огромный взлом или обходной путь - этот метод использовался годами в различных воплощениях (обычно известный как метод 'clearfix'), и я не думаю, что он скоро исчезнет.

Ваш ответ на вопрос