Las propiedades float y clear se utilizan para controlar el flujo y la disposición de los elementos en el diseño web. Aunque han sido ampliamente usadas en el pasado para crear diseños de columnas y otras disposiciones complejas, hoy en día su uso ha sido en parte reemplazado por Flexbox y Grid. Sin embargo, todavía son importantes para entender cómo funcionan los diseños en CSS.
1. Propiedad float
La propiedad float permite que un elemento se desplace hacia la izquierda o hacia la derecha dentro de su contenedor, permitiendo que el texto u otros elementos fluyan a su alrededor.
- Valores Comunes:
left: Flota el elemento hacia el lado izquierdo del contenedor, permitiendo que otros elementos fluyan a su derecha.right: Flota el elemento hacia el lado derecho del contenedor, permitiendo que otros elementos fluyan a su izquierda.none: El valor por defecto; el elemento no flota.inherit: Hereda el valor de su contenedor padre.
- Ejemplo de código:
.float-left {
float: left;
width: 200px;
margin: 10px;
background-color: lightblue;
}
.float-right {
float: right;
width: 200px;
margin: 10px;
background-color: lightcoral;
}Ejemplo en HTML:
<div class="float-left">Elemento flotante a la izquierda</div>
<div class="float-right">Elemento flotante a la derecha</div>
<p>Texto que fluye alrededor de los elementos flotantes.</p>2. Propiedad clear
La propiedad clear se usa para especificar si un elemento debe colocarse debajo de los elementos flotantes que lo preceden. Esto es útil para evitar que los elementos floten al lado de otros elementos, en lugar de hacerlo debajo de ellos.
- Valores Comunes:
left: El elemento no puede aparecer a la izquierda de los elementos flotantes.right: El elemento no puede aparecer a la derecha de los elementos flotantes.both: El elemento no puede aparecer ni a la izquierda ni a la derecha de los elementos flotantes.none: El valor por defecto; no se aplica ninguna restricción.
- Ejemplo de código:
.clear-both {
clear: both;
background-color: lightgreen;
padding: 10px;
}Ejemplo en HTML:
<div class="float-left">Elemento flotante a la izquierda</div>
<div class="float-right">Elemento flotante a la derecha</div>
<div class="clear-both">Elemento que limpia el flujo de los elementos flotantes</div>Ejemplo Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float y Clear</title>
<style>
.float-left {
float: left;
width: 200px;
margin: 10px;
background-color: lightblue;
}
.float-right {
float: right;
width: 200px;
margin: 10px;
background-color: lightcoral;
}
.clear-both {
clear: both;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="float-left">Elemento flotante a la izquierda</div>
<div class="float-right">Elemento flotante a la derecha</div>
<p>Texto que fluye alrededor de los elementos flotantes. El texto fluye alrededor de los elementos flotantes hasta el final de la línea.</p>
<div class="clear-both">Elemento que limpia el flujo de los elementos flotantes</div>
<p>Texto debajo del elemento con clear.</p>
</body>
</html>