Propiedad float para bloques en CSS
La propiedad float
es aplicable no solo
a imágenes, sino también a cualquier otro bloque.
Comprobemos esto.
Supongamos que tenemos un bloque padre con la clase parent
,
y dentro de él hay texto y un bloque hijo
con la clase child
. A ambos bloques se les ha asignado
un borde, y al hijo también un ancho y una altura:
<div class="parent">
<div class="child"></div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Ahora establezcamos float
para el hijo
en el valor left
- el texto comenzará a fluir
alrededor de nuestro bloque:
<div class="parent">
<div class="child"></div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
: