La propiedad flotante CSS y su limpieza

 

 

 

La propiedad flotante css y su limpieza 1

Cómo trabajar con la propiedad `float` en CSS y con el borrado

La flotación ha sido un tema muy importante en el pasado.

Se utilizó en muchos hacks y usos creativos porque era una de las pocas formas, junto con las tablas, de implementar algunos diseños. En el pasado, solíamos hacer flotar la barra lateral hacia la izquierda, por ejemplo, para mostrarla en el lado izquierdo de la pantalla y agregar un margen al contenido principal.

Afortunadamente los tiempos han cambiado y hoy tenemos Flexbox y Grid para ayudarnos con el diseño, y float ha vuelto a su alcance original: colocar contenido en un lado del elemento contenedor y hacer que sus hermanos se muestren a su alrededor.

 

La floatpropiedad admite 3 valores:

  • left
  • right
  • none(el valor predeterminado)

Digamos que tenemos un cuadro que contiene un párrafo con algún texto y el párrafo también contiene una imagen.

Aquí hay algo de código:

div div div pThis is some random paragraph and an image. img src="https://via.placeholder.com/100x100" / The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. /p /div /div/div
.parent { background-color: #af47ff; padding: 30px; width: 500px;}.child { background-color: #ff4797; padding: 30px;}.box { background-color: #f3ff47; padding: 30px; border: 2px solid #333; border-style: dotted; font-family: courier; text-align: justify; font-size: 1rem;}

y la apariencia visual:

Como puedes ver, el flujo normal por defecto considera la imagen en línea y le deja espacio en la línea misma.

Si agregamos float: lefta la imagen algo de relleno:

img { float: left; padding: 20px 20px 0px 0px;}

Este es el resultado:

y esto es lo que obtenemos al aplicar un float: correcto, ajustando el relleno en consecuencia: Noticias raras y curiosas

img { float: right; padding: 20px 0px 20px 20px;}

Un elemento flotante se elimina del flujo normal de la página y el resto del contenido fluye a su alrededor.

Vea el ejemplo en Codepen

No está limitado a imágenes flotantes. Aquí cambiamos la imagen por un spanelemento:

div div div pThis is some random paragraph and an image. spanSome text to float/span The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. /p /div /div/div
span { float: right; margin: 20px 0px 20px 20px; padding: 10px; border: 1px solid black}

Y este es el resultado:

Claro

¿Qué sucede cuando flota más de un elemento?

Si al flotar encuentran otra imagen flotante, por defecto se apilan una al lado de la otra, horizontalmente. Hasta que no haya espacio y se empezarán a apilar en una nueva línea.

Digamos que tenemos 3 imágenes en línea dentro de una petiqueta:

float: leftSi a esas imágenes añadimos :

img { float: left; padding: 20px 20px 0px 0px;}

Esto es lo que tendremos:

Si agrega clear: leftimágenes, estas se apilarán verticalmente en lugar de horizontalmente:

Utilicé el leftvalor para clear. Permite

  • leftPara limpiar los flotadores izquierdos
  • rightPara limpiar los flotadores derechos
  • bothPara limpiar los flotadores izquierdo y derecho
  • none(predeterminado) deshabilita la limpieza

Tips de CSS




Tal vez te puede interesar:

  1. Filtros CSS
  2. Manejo de errores CSS
  3. Importar un archivo CSS usando @import
  4. Normalización de CSS

La propiedad flotante CSS y su limpieza

La flotación ha sido un tema muy importante en el pasado. Cómo trabajar con la propiedad `float` en CSS y con el borrado Cómo trabajar con la propiedad `flo

programar

es

https://aprendeprogramando.es/static/images/programar-la-propiedad-flotante-css-y-su-limpieza-2085-0.jpg

2024-11-01

 

La propiedad flotante css y su limpieza 1
La propiedad flotante css y su limpieza 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences