css - filas - rejillas bootstrap 4
bootstrap.css:.container: antes de la tabla de visualización (1)
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?
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
.clearfixa 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 dedisplay: tablecrea unatable-cellanó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:afterpseudo-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 activandohasLayout