Me he encontrado con <div class="clear"></div> en muchos lugares, pero no estoy al tanto de por qué se hace? ¿Puede alguien informarme sobre esto, por qué se usa en CSS? Este es el CSS:¿Por qué se usa <div class="clear"></div> después de múltiples DIVS flotantes en un contenedor DIV?
div.clear {
clear:both;
}
La altura de un elemento está determinado por sus elementos secundarios (a menos que se establece explícitamente). P. ej .:
+------A------+
|+-----------+|
|| B ||
|+-----------+|
|+-----------+|
|| C ||
|+-----------+|
+-------------+
La altura de A está determinada por el lugar donde se encuentra el borde inferior de su hijo C.
Ahora, elementos flotantes no cuentan para la altura de sus padres, que están sacados del flujo regular:
+------A------+
+--+---------++
| B |
+---------+
+---------+
| C |
+---------+
El elemento A se contrae a una altura mínima, ya que sus dos hijos son flotado.
elementos de evacuación se introducen para restaurar la altura correcta:
+------A------+
| +---------+|
| | B ||
| +---------+|
| +---------+|
| | C ||
| +---------+|
|+-----D-----+|
+-------------+
El elemento D es un elemento cero altura con el atributo clear establecido. Eso hace que caiga por debajo de los elementos flotados (los borra ellos). Eso hace que A tenga un elemento hijo normal para calcular su altura por. Ese es el caso de uso más típico al menos.
La solución a menudo mejor para introducir elementos HTML adicionales es establecer A en overflow: hidden. Eso tiene el efecto de forzar un cálculo de altura, que tiene el mismo efecto de aumentar la altura al tamaño deseado. Sin embargo, esta solución puede tener o no otros efectos secundarios.
+1 para la descripción ilustrada de cómo funcionan las carrozas :) – Hristo
+1 Perfeccionista ... Me gusta ... –
¿Puede explicar más detalladamente cómo "establecer [ting] A a 'desbordamiento: hidden' "ayuda? ¿No se calcula la altura * * de A * para excluir las alturas de B y C porque flotan? ¿Cómo los esconde porque se desbordan? El cuadro delimitador de A obliga a la caja a crecer para incluirlos? Tampoco me gusta agregar invisible * content * para controlar * layout * y quiero entender esta mejor solución (en mi humilde opinión). –
Es para eliminar los estilos flotantes.
[w3fools] (http://w3fools.com) –
No pensé que esos eran muy mal de explicaciones. Se cambiaron los enlaces a w3c.org :) – Brian
En resumen, es como decirle al navegador que no permita nada (es decir, cualquier elemento, ya sea div, span, ancla, tabla, etc.) ya sea a la izquierda oa la derecha del elemento anterior. Esto hará que el siguiente elemento se mueva a la siguiente línea.
Los problemas más comunes que enfrentamos cuando escribimos el código con diseños basados en flotador es que el contenedor div principal no se expande a la altura de los elementos flotantes secundarios. La solución típica para solucionar esto es agregar un elemento con flotante claro después de los elementos flotantes o agregar un clearfix al div principal.
Te estoy dando unos dos buenos ejemplos para una mejor comprensión acerca de la limpieza de los flotadores: -
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
buena explicación por deceze. Pero es <div class="clear"></div> método antiguo y poco profesional prueba usando
#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; }
simplemente seguir añadiendo otros elementos que necesita aclarado como #firstlement:after, .secondelement:after y así sucesivamente.
Más sobre esto vaya a este http://www.w3.org/TR/CSS2/visuren.html#float-position –