Cómo Limpiar elementos flotantes (float) en CSS
¿Cómo hacerlo?
Ejemplo 1
El diseño de la página requiere de dos columnas: del lado izquierdo se despliega el contenido principal y del lado derecho se lista el menú principal.
Regularmente si desearamos colocar dos o más columnas haríamos lo siguiente:
El CSS
El CSS
1 2 3 | <style type="text/css"> div.clear { clear: both; } </style> |
El HTML
1 2 3 4 5 6 7 8 9 | <div id="content">
<div id="left">
Este contenido se despliega en el lado izquierdo
<div>
<div id="right">
Este contenido se despliega en el lado derecho
</div>
<div class="clear"></div>
</div> |
El único inconveniente es que para limpiar los elementos flotantes nos vemos en la obligación de colocar un div vacío a continuación de los elementos flotantes, tal como se muestra en el caso anterior, lo cual a veces puede ser un poco confuso y claro, ensuciar nuestro código HTML.
El CSS
1 2 3 4 5 | <style type="text/css"> .cleaner { *display: inline-block; } * html .cleaner { height: 1%; } .cleaner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; } </style> |
El HTML
1 2 3 4 5 6 7 8 9 |
<div id="content" class="cleaner">
<div id="left">
Este contenido se despliega en el lado izquierdo
<div>
<div id="right">
Este contenido se despliega en el lado derecho
</div>
</div> |
¿Necesitas otro ejemplo?
Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.