Cómo borrar anidadas flotadores

Cuando usted flota partes de su página Web dentro de una caja más grande, la caja más grande no extenderá automáticamente para rodear todo el elemento flotante. Este es el problema con los flotadores anidados, pero con el paso de los años los desarrolladores web han trabajado a cabo correcciones de compensación que se suman al flotador flotadores anidados para mantenerlos contenidos dentro de sus elementos primarios. El método descrito aquí se suma a una cuadra reutilizable de código en la hoja de estilo, que se puede aplicar como una clase para cada etiqueta HTML que crea un flotador anidada.

Instrucciones

1 Abra la hoja de estilos en el Bloc de notas o un editor de código y crear esta nueva regla de estilo:

.clearfix: tras {
}

Esta regla de estilo hace un par de cosas. La parte ".clearfix" se dirige a una clase en la que va a añadir más tarde a los flotadores anidados en el código HTML de la página Web. Después de la clase, el ": después de" pseudo-elemento crea un nuevo elemento de la página web después de cada elemento - partes de la página creada por etiquetas HTML - que tiene el "clearfix" nombre de la clase. El pseudo-elemento se crea borrará sus flotadores anidados.

2 Configuración de su pseudo-elemento de contenido, pantalla a nivel de bloque y la altura cero. Esto no es sino una de las muchas maneras de hacerlo:

.clearfix: tras {
visibility: hidden;
bloqueo de pantalla;
font-size: 0;
contenido: " ";
Limpia los dos;
altura: 0;
}

La idea es crear un pseudo-elemento en bloque que contiene el contenido sin ocupar espacio en la página. Esto permitirá que el cuadro que existe su flotador dentro de ampliar hacia abajo de manera que el flotador se mantiene en la caja en lugar de aparecer a superponerse ella. Al mismo tiempo, el "claro: tanto" regla despeja el flotador en ambos lados.

3 Añadir un par de cortes para las versiones de Internet Explorer 6 y 7:

html .clearfix,
*: First-child + html {.clearfix
zoom: 1;
}

Este código va a la derecha después de la ".clearfix: después de" regla de estilo.

4 Abra la página Web y encontrar todas las etiquetas que crean flotadores anidados. Si usted no sabe cuáles son las etiquetas para editar, cargar la página en un navegador y mirar el contenido flotaba; luego encontrar la envoltura alrededor de las etiquetas que los contenidos en el código HTML. Agregue la clase "clearfix" a todas las etiquetas anidadas flotador:

<Div id = clase "my_div" = "some_class clearfix">
contenido flotado aquí ...
</ Div>

En la mayoría de los casos, sus etiquetas flotaban serán divs, aunque diseños codificados en HTML 5 también contendrá flotado "<sección>" y "<aside>" etiquetas.

Consejos y advertencias

• Si se utiliza un sistema de cuadrícula CSS, tales como 960 Grid System, CSS Blueprint o Menos marco, las hojas de estilo que se incluyen con su paquete ya contienen una solución clara. Leer sus instrucciones sobre cómo limpiar los flotadores anidados.