Sunday, September 4, 2022
HomeWordPress DevelopmentCSS float 🎨 - DEV Neighborhood πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

CSS float 🎨 – DEV Neighborhood πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»


  1. IntroducciΓ³n
  2. Sintaxis
  3. Ejemplos
  4. El problema de tener solo elementos float
  5. float no se lleva bien con place:absolute
  6. Conclusiones
  7. 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;

Enter fullscreen mode

Exit fullscreen mode

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 eliminar float de algΓΊn elemento.

Tremendous intuitivos los valores de float. Cabe resaltar que solo posee estas propiedades, a diferencia de usar place tanto relative o absolute donde desbloquemos propiedades como high, botton, left y proper; para float solo tenemos left y proper. Si necesitamos manipular elementos en el eje vertical tendrΓ­amos que buscar otras alternativas como por ejemplo flex-box o grid.

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 con margin 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 elementos float, inevitablemente tendremos este comportamiento fastidioso, para solucionarlo nos podemos apoyar de la sentencia overflow:auto; para que detecte si ocurre un desfase y haga que el container 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>
Enter fullscreen mode

Exit fullscreen mode

.container{
  show:flex;
  justify-content:space-between;
  border:1px stable #000;
  padding: .4rem .8rem;
}
Enter fullscreen mode

Exit fullscreen mode

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; al container; solo esto hizo que el maquetado deje de funcionar como queremos.

  • Esto sucede por que place:absolute; al igual que float modifica el flujo regular de los elementos HTML en el documento, pero a diferencia de float o del mismo relative; 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 y none.
  • 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 usa overflow:auto.
  • Si un contenedor tiene asignado place:absolute y sus hijos son float, 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:

img

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments