css - filas - rejillas bootstrap 4

bootstrap.css:.container: antes de la tabla de visualización

Question

En bootstrap.css

puedes encontrar tanto en Github como en http://twitter.github.com/bootstrap/#

Por qué usa:

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

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

¿Por qué definir display: table in .container: before / after y .row: before / after?

Answer 1

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

El clearfix es una forma popular de contener flotantes sin recurrir al uso de marcas de presentación. Este artículo presenta una actualización del método de compensación que reduce aún más la cantidad de CSS requerida.

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

Agregar .clearfix a un elemento asegurará que siempre contenga completamente sus hijos flotados. Ha habido muchas variantes del hack clearfix en los últimos años, y hay otros hacks que también pueden ayudarle a contener los niños flotados, pero el H5BP actualmente proporciona esta clase de ayuda micro clearfix.

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  Todos los navegadores comprenden esta regla, excepto IE6 / 7. Genera un pseudo-elemento antes y después del contenido del elemento que contiene flotadores. Configuración de display: table crea una table-cell anónima y un nuevo contexto de formato de bloque. Esto actúa para evitar el colapso del margen superior y mejorar la coherencia entre los navegadores modernos y IE6 / 7.

• .clearfix:after { clear: both; }
  Hace que :after pseudo-elemento elimine los elementos flotantes de este elemento, lo que hace que el elemento se expanda para contener los flotantes.

• .clearfix { zoom: 1; }
  Cree un nuevo contexto de formato de bloque en IE6 / 7 activando hasLayout