CSS ํ๋กํธ ๐จ
์ธ๋์ค
float
float
no se lleva bien con position:absolute
1. ์๊ฐ
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. ์ ํ์์ค
float
tiene una sintaxis super sencilla:
.img{
float: left | right | none;
}
Veamos un poco cada caso en particular:
-
left
: desplaza todo el elemento lo mas posible a la izquierda, el resto de los elementos se adapta a su contenido. -
right
: 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.
Super intuitivos los valores de
float
. Cabe resaltar que solo posee estas propiedades, a diferencia de usarposition
tantorelative
oabsolute
donde desbloquemos propiedades comotop
,botton
,left
yright
; parafloat
solo tenemosleft
yright
. 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. ์์ ฌํ๋ก์ค
El ejemplo mas comรบn para el uso de float
es simular un layout 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 simple 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:right
y aรฑadir algunos espaciados conmargin
para que se vea bien, eso es todo. Si quieres intรฉntalo tu mismo.
4. ํ ๋ ์๋ก ์๋ ๋ฉํ ์ค ํ๋กํธ ๋ฌธ์
Veamos el siguiente ejemplo:
En este ejemplo tenemos un
container
solo con dos links 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{
display:flex;
justify-content:space-between;
border:1px solid #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 position:absolute
Una peculiaridad de float
es que si el contendor lleva un position: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 tools de google son รบtiles para esto, tomalo siempre en cuenta.
Para finalizar el post, veamos un รบltimo ejemplo:
En este caso, tomamos el ejemplo anterior que era funcional y simplemente agregamos un
position:absolute;
alcontainer
; solo esto hizo que el maquetado deje de funcionar como queremos.Esto sucede por que
position:absolute;
al igual quefloat
modifica el flujo normal 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
position:relative
.
Esto es todo por este pequeรฑo post.
์ฐธ์กฐ
https://web.dev/learn/css/layout/
๊ฒฐ๋ก
-
float
se encarga de modificar el flujo normal de los elementos HTML del documento. - Puede recibir 3 valores:
left
,right
ynone
. - Antes de Flex Box 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:right
, 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
position:absolute
y sus hijos sonfloat
, los cambios esperados no se aplicaran, para solucionarlo no uses esta combinaciรณn de propiedades.
Posiblemente los siguientes artรญculos sean de tu interรฉs:
ES6: Promesas en JavaScript
ํฌ๋ฆฌ์คํฐ์ ํ๋ฅด๋๋ ใป 10์ 14์ผ '21 ใป 6๋ถ ์ฝ๊ธฐ
๋ ผ๋ฆฌ์ Nullish ํ ๋น ??= en JavaScript
Cristian Fernando ใป 3์ 5์ผ ใป 2๋ถ ์ฝ๊ธฐ
Local Storage API en JavaScript ๐
ํฌ๋ฆฌ์คํฐ์ ํ๋ฅด๋๋ ใป 2021๋ 8์ 2์ผ ใป 3๋ถ ์ฝ๊ธฐ
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(CSS ํ๋กํธ ๐จ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/duxtech/css-float-lj5ํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค