twitter bootstrap - w3schools - Comprender la clase clearfix de Bootstrap

html clearfix class

Question

.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}

1. ¿Por qué no usar display:block ?
2. Además, ¿por qué también se aplica al ::before pseudoclass?

Answer 1

Cuando se utiliza un clearfix en un contenedor principal, se envuelve automáticamente alrededor de todos los elementos secundarios.

Generalmente se usa después de elementos flotantes para despejar el diseño de flotación.

Cuando se utiliza el diseño flotante, alineará horizontalmente los elementos secundarios. Clearfix borra este comportamiento.

Ejemplo - Paneles Bootstrap

En bootstrap, cuando se utiliza el panel de clase, hay 3 tipos de elementos secundarios: panel-encabezado, panel-cuerpo, panel-pie de página. Todos los cuales tienen pantalla: diseño de bloque, pero panel-body tiene un clearfix pre-aplicado. panel-body es un tipo de contenedor principal, mientras que panel-header & panel-footer no está destinado a ser un contenedor, solo tiene la intención de contener texto básico.

Si se agregan elementos flotantes, el contenedor primario no se envuelve alrededor de esos elementos porque el contenedor primario no hereda la altura de los elementos flotantes.

Por lo tanto, para panel-header y panel-pie de página, se necesita clearfix para borrar el diseño flotante de los elementos: la clase Clearfix da una apariencia visual de que la altura del contenedor principal se ha aumentado para acomodar todos sus elementos secundarios.

 <div class="container">
<div class="panel panel-default">
<div class="panel-footer">
<div class="col-xs-6">
<input type="button" class="btn btn-primary" value="Button1">
<input type="button" class="btn btn-primary" value="Button2">
<input type="button" class="btn btn-primary" value="Button3">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-footer">
<div class="col-xs-6">
<input type="button" class="btn btn-primary" value="Button1">
<input type="button" class="btn btn-primary" value="Button2">
<input type="button" class="btn btn-primary" value="Button3">
</div>
<div class="clearfix"/>
</div>
</div>
</div>

Answer 2

El elemento :before pseudo no es necesario para el propio clearfix .

Es solo una característica adicional que ayuda a evitar el colapso de márgenes del primer elemento secundario. Por lo tanto, se garantiza que el margen superior de un elemento de bloque secundario del elemento "clearfixed" se colocará debajo del borde superior del elemento clearfixed.

display:table se está utilizando porque display:block no funciona. Usando la display:block márgenes del display:block colapsarán incluso con un elemento :before .

Hay una advertencia: si vertical-align:baseline se usa en celdas de tabla con elementos clearfixed <div> , Firefox no se alineará bien. Entonces quizás prefiera usar la display:block pesar de perder la característica de contra-colapso. En caso de mayor interés, lea este artículo: Clearfix interfiere con la alineación vertical .

Answer 3

.clearfix se define en less/mixins.less . Justo encima de su definición hay un comentario con un enlace a este artículo:

Un nuevo truco de micro clearfix

El artículo explica cómo funciona todo.

ACTUALIZACIÓN: Sí, las respuestas solo de enlace son malas. Sabía esto incluso en el momento en que publiqué esta respuesta, pero no tenía ganas de copiar y pegar estaba bien debido a derechos de autor, plagio y lo que es tuyo. Sin embargo, ahora siento que está bien, ya que me he vinculado al artículo original. Sin embargo, también debería mencionar el nombre del autor para obtener crédito: Nicolas Gallagher. Aquí está la esencia del artículo (nótese que el "método de Thierry" se refiere al "clearfix reloaded" de Thierry Koblentz ):

Este "micro clearfix" genera pseudo-elementos y establece su display en la table . Esto crea una celda de tabla anónima y un nuevo contexto de formato de bloque que significa que :before pseudo-elemento impide el colapso del margen superior. El pseudo-elemento :after se usa para borrar los flotadores. Como resultado, no hay necesidad de ocultar el contenido generado y se reduce la cantidad total de código necesario.

Incluir el selector :before no es necesario para borrar los flotantes, pero evita que los márgenes superiores colapsen en los navegadores modernos. Esto tiene dos beneficios:

• Garantiza la coherencia visual con otras técnicas de contención de flotación que crean un nuevo contexto de formato de bloque, por ejemplo, overflow:hidden

• Garantiza la coherencia visual con IE 6/7 cuando se aplica zoom:1 .

NB : Hay circunstancias en las que IE 6/7 no contendrá los márgenes inferiores de flotantes dentro de un nuevo contexto de formato de bloque. Más detalles se pueden encontrar aquí: Mejor contención de flotación en IE usando expresiones CSS .

El uso de content:" " (tenga en cuenta el espacio en la cadena de contenido) evita un error de Opera que crea espacio alrededor de elementos clearfixed si el atributo contenteditable también está presente en algún lugar del HTML. Gracias a Sergio Cerrutti por detectar esta solución. Una solución alternativa es usar font:0/0 a .

Legacy Firefox

Firefox <3.5 se beneficiará del uso del método de Thierry con la adición de visibility:hidden para ocultar el carácter insertado. Esto se debe a que las versiones heredadas de Firefox necesitan content:"." para evitar que aparezca espacio extra entre el body y su primer elemento secundario, en determinadas circunstancias (por ejemplo, jsfiddle.net/necolas/K538S/ ).

Los métodos alternativos de contención de flotación que crean un nuevo contexto de formato de bloques, como aplicar overflow:hidden o display:inline-block al elemento contenedor, también evitarán este comportamiento en las versiones heredadas de Firefox.