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 float
propiedad 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: left
a 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 span
elemento:
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 p
etiqueta:
float: left
Si a esas imágenes añadimos :
img { float: left; padding: 20px 20px 0px 0px;}
Esto es lo que tendremos:
Si agrega clear: left
imágenes, estas se apilarán verticalmente en lugar de horizontalmente:
Utilicé el left
valor para clear
. Permite
left
Para limpiar los flotadores izquierdosright
Para limpiar los flotadores derechosboth
Para limpiar los flotadores izquierdo y derechonone
(predeterminado) deshabilita la limpieza
Tips de CSS
Tal vez te puede interesar:
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
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