
Un overflow: hidden; y width como clearfix
Esta técnica evita de forma muy sencilla los daños colaterales de float
. Simplemente debemos de indicar las propiedades overflow: hidden;
y especificar una medida para el width;
en el elemento contenedor.
div.container { overflow: hidden; width: 100%; } div.left { width: 75%; float: left; } div.right { width: 25%; float: right; }
Creo que IE al ver que el contenedor incorpora un width
y un overflow
(que no es el overflow por defecto «visible») se ve obligado a re-calcular su tamaño. En ese proceso ya tienen en cuenta a los elementos hijos flotados.
Existen varias técnicas para el float, pero personalmente me decanto por esta. Me parece muy sencilla de implementar, mantiene la abstracción estructura-diseño y es realmente cross-browsing.
2 Comments
javiaurea
Hola Pacotole,
En muchos casos también podemos tener en cuenta que precisamente por el flotamiento sea necesario forzar y esconder los scrolls. Algunos navegadores los muestran al evento onclick. Por esta razón sigo prefiriendo el hidden.
Comments are closed for this post