CSS ํ”Œ๋กœํŠธ ๐ŸŽจ

13629 ๋‹จ์–ด beginnersprogrammingcsswebdev

์ธ๋””์Šค


  • Introducciรณn
  • Sintaxis
  • Ejemplos
  • El problema de tener solo elementos float
  • float no se lleva bien con position:absolute
  • Conclusiones
  • Referencias



  • 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 eliminar float de algรบn elemento.

    Super intuitivos los valores de float. Cabe resaltar que solo posee estas propiedades, a diferencia de usar position tanto relative o absolute donde desbloquemos propiedades como top, botton, left y right; para float solo tenemos left y right. 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. ์—์ ฌํ”Œ๋กœ์Šค

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

    • Esto sucede por que position:absolute; al igual que float modifica el flujo normal 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 position:relative.

    Esto es todo por este pequeรฑo post.

    ์ฐธ์กฐ

  • https://uniwebsidad.com/libros/referencia-css2/float

  • 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 y none .
    • 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 usa overflow:auto .
    • Si un contenedor tiene asignado position:absolute y sus hijos son float , 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:














    ์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ