- IntroducciΓ³n
- Sintaxis
- Ejemplos
- El problema de tener solo elementos
float
float
no se lleva bien conplace:absolute
- Conclusiones
- Referencias
1. IntroducciΓ³n
La propiedad float
de CSS se encarga de alterar el flujo comΓΊn del elemento HTML al que se lo aplica, esto quiere decir que en base a algunos parΓ‘metros podremos posicionar los elementos segΓΊn nuestras necesidades.
2. Sintaxis
float
tiene una sintaxis tremendous sencilla:
.img none;
Veamos un poco cada caso en explicit:
-
left
: desplaza todo el elemento lo mas posible a la izquierda, el resto de los elementos se adapta a su contenido. -
proper
: desplaza todo el elemento lo mas posible a la derecha, el resto de los elementos se adapta a su contenido. -
none
: es el valor por defecto, puede ser ΓΊtil para eliminarfloat
de algΓΊn elemento.
Tremendous intuitivos los valores de
float
. Cabe resaltar que solo posee estas propiedades, a diferencia de usarplace
tantorelative
oabsolute
donde desbloquemos propiedades comohigh
,botton
,left
yproper
; parafloat
solo tenemosleft
yproper
. Si necesitamos manipular elementos en el eje vertical tendrΓamos que buscar otras alternativas como por ejemploflex-box
ogrid
.
En programaciΓ³n como siempre, explicarlo solo con teorΓa no es suficiente, por ello veamos algunos ejemplos:
3. Ejemplos
El ejemplo mas comΓΊn para el uso de float
es simular un format de periΓ³dico donde el texto se adapta a una imagen del titular como veremos a continuaciΓ³n:
En este ejemplo tenemos:
- Una imagen cualquiera acomodada al inicio del documento, como las imΓ‘genes son elementos
inline
solo necesita el espacio necesario para su contenido. - Un conjunto de pΓ‘rrafos con texto, los pΓ‘rrafos con elementos
block
por ende, usaran todo el ancho necesario para que se rendericen el documento, y por ende muchos saltos de lΓnea.
ΒΏCΓ³mo hacemos para que el texto se adapte a la imagen? AcΓ‘ entra float
al rescate:
Veamos a detalle que hicimos:
-
A easy vista pareciera que aplicando
float:left;
a la imagen esta no se mueve, pero lo que hacemos es fijarla en esa posiciΓ³n y de esta manera el texto que estaba por debajo de toda la imagen pasa a adaptarse. -
Usando el pseudo elemento
::first-letter
seleccionamos solo la primera letra del primer pΓ‘rrafo para cambiarle algunos estilos y asΓ lograr un mejor acabado, mas parecido a un titular de periΓ³dico. -
Si quisiΓ©ramos que la imagen se pegue a la derecha, basta con hacer
float:proper
y aΓ±adir algunos espaciados conmargin
para que se vea bien, eso es todo. Si quieres intΓ©ntalo tu mismo.
4. El problema de tener solo elementos float
Veamos el siguiente ejemplo:
-
En este ejemplo tenemos un
container
solo con dos hyperlinks que queremos posicionarlos el primero a la izquierda y el segundo a la derecha. -
Como vemos el
container
se desfasa y rompe el diseΓ±o, pero, ΒΏpor que pasa esto? -
Esto ocurre por que no es posible tener solo en un
container
elementosfloat
, inevitablemente tendremos este comportamiento fastidioso, para solucionarlo nos podemos apoyar de la sentenciaoverflow:auto;
para que detecte si ocurre un desfase y haga que elcontainer
se expanda lo necesario para corregir el error:
Creo que queda mas que claro que ahora con el avance de CSS solucionar este problema es ridΓculamente sencillo usando por ejemplo flex-box
:
<div class="container">
<a href="#" class="primero">Primero</a>
<a href="#" class="segundo">Γltimo</a>
</div>
.container{
show:flex;
justify-content:space-between;
border:1px stable #000;
padding: .4rem .8rem;
}
Con este cΓ³digo CSS quedaria el problema mΓ‘s que arreglado, velo tu mismo y sobre todo prubalo.
5. float
no se lleva bien con place:absolute
Una peculiaridad de float
es que si el contendor lleva un place:absolute
e intentamos usar float
en los hijos, esto no funcionara, detalle que si omitimos puede conllevar a frustraciΓ³n al momento de debuggear la app.
Recuerda que en CSS no tenemos una retroalimentaciΓ³n con errores para el dev, simplemente nuestros estilos no se aplican y nos quedamos en el limbo sin saber por que.
Las dev instruments de google son ΓΊtiles para esto, tomalo siempre en cuenta.
Para finalizar el put up, veamos un ΓΊltimo ejemplo:
-
En este caso, tomamos el ejemplo anterior que period funcional y simplemente agregamos un
place:absolute;
alcontainer
; solo esto hizo que el maquetado deje de funcionar como queremos. -
Esto sucede por que
place:absolute;
al igual quefloat
modifica el flujo regular de los elementos HTML en el documento, pero a diferencia defloat
o del mismorelative;
lo hace de manera inmediata.
Este comportamiento no se da con
place:relative
.
Esto es todo por este pequeΓ±o put up.
Referencias
Conclusiones
-
float
se encarga de modificar el flujo regular de los elementos HTML del documento. - Puede recibir 3 valores:
left
,proper
ynone
. - Antes de Flex Field o CSS Grid, los devs del pasado usaban
float
para posicionar sus elementos, hoy en dΓa casi no se lo ve en cΓ³digo moderno, pero te lo puedes topar con cΓ³digo legacy. -
float:left
, pega lo mas posible al lado izquierdo de su contenedor al elemento que se lo aplique y ademΓ‘s adapta todo el contenido. -
float:proper
, pega lo mas posible al lado derecho de su contenedor al elemento que se lo aplique y ademΓ‘s adapta todo el contenido. - Un contenedor que solo tenga hijos con
float
harΓ‘ que el contenedor se rompa, para solucionarlo usaoverflow:auto
. - Si un contenedor tiene asignado
place:absolute
y sus hijos sonfloat
, los cambios esperados no se aplicaran, para solucionarlo no makes use of esta combinaciΓ³n de propiedades.
Posiblemente los siguientes artΓculos sean de tu interΓ©s: