Si la capa que contiene a las otras dos no tienen la propiedad float, se produce lo que se llama Container Collapse, es decir la capa que engloba a las otras dos no se adaptará automáticamente al alto de las capas que tiene dentro, produciéndose el efecto que vemos en la imagen de abajo:
Partimos del siguiente ejemplo en el que una capa que a su vez contiene dos capas con propiedad float:<div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div>
Para arreglarlo hay varias maneras:
- Poner a la capa sin float la propiedad overflow: hidden.
- Usar el famoso hack de Nicolas Gallagher para ello añadiríamos la clase .cf a la capa sin float y en nuestra hoja de estilo añadiremos el hack:
/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; }
No hay comentarios:
Publicar un comentario