Bootstrap.css:.container: перед таблицей отображения

В bootstrap.css

вы можете найти либо из Github, либо из http://twitter.github.com/bootstrap/#

Почему он использует:

.container:before, .container:after {
  display: table;
  content: "";
  zoom: 1;
  }

  .row:before, .row:after {
   display: table;
   content: "";
   zoom: 1;
   }

Зачем определять display: table в .container: before/after и .row: before/after?

Ответы

Ответ 1

http://nicolasgallagher.com/micro-clearfix-hack/

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

http://html5boilerplate.com/docs/The-style/#clearfix:

Добавление .clearfix в элемент гарантирует, что он всегда будет полностью содержит его плавающих детей. Было много вариантов clearfix hack на протяжении многих лет, и есть другие хаки, которые также могут помочь вам содержать плавающих детей, но H5BP в настоящее время предоставляет этот класс микрочипов clear clear.

  • .clearfix:before, .clearfix:after { content: ""; display: table; }
    Это правило понимается всеми браузерами, за исключением IE6/7. Он генерирует псевдоэлемент до и после содержимого элемента, который содержит поплавки. Настройка display: table создает анонимный table-cell и новый контекст форматирования блока. Это предотвращает крах верхнего края и улучшить согласованность между современными браузеров и IE6/7.

  • .clearfix:after { clear: both; }
    Делает псевдоэлемент :after очищает всплывающие дочерние элементы этого элемента, тем самым, чтобы элемент расширялся, чтобы содержать поплавки.

  • .clearfix { zoom: 1; }
    Создайте новый контекст форматирования блоков в IE6/7 путем запуска hasLayout