Imagina una revista impresa. A medida que navega por las páginas, ve el texto y las imágenes organizados de diferentes maneras. Tal vez haya una imagen adentro con texto alrededor. Tal vez haya una imagen en el lado izquierdo del párrafo introductorio. Tal vez haya una imagen con texto estampado.
Sin embargo, la mayoría de las veces verá texto envuelto alrededor de las imágenes. Esto hace que sea más fácil ver tanto el texto como las imágenes al tiempo que reduce la cantidad de espacio en blanco en la página.
Al igual que los diseñadores de impresión, los diseñadores web necesitan una solución para envolver el texto alrededor de un elemento en un diseño; esto garantiza que se mantenga el flujo de la página y se maximice el espacio.
Esta solución es plataforma propiedad en CSS. En esta publicación, veremos qué plataforma es y lo que hace en CSS. A continuación, exploraremos cómo usar y eliminar una propiedad. Empecemos.
¿Qué es la propiedad flotante de CSS?
La propiedad flotante de CSS controla la posición y el formato del contenido en la página. Su uso más común es envolver texto alrededor de imágenes. Sin embargo, puede usar la propiedad flotante para envolver cualquier elemento en línea alrededor de un elemento HTML definido, incluidas listas, párrafos, divs, spans, tablas, iframes y comillas de bloque.
los plataforma la propiedad se puede especificar con cualquiera de los siguientes valores:
- No (predeterminado): el artículo no flota. Simplemente se muestra donde aparece en el texto.
- izquierda: El elemento flota a la izquierda de su contenedor.
- ley: El elemento flota a la derecha de su contenedor.
- heredar: el elemento hereda el valor de punto flotante de su padre.
Tenga en cuenta que no hay valores de propiedad para el centro, la parte superior y la parte inferior. Esto se debe a que no puede mover elementos al centro, arriba o abajo del contenedor, solo hacia la izquierda o hacia la derecha.
Si está utilizando Bootstrap CSS para construir su sitio, hay valores adicionales para crear flotantes receptivos. De lo contrario tendrás que use consultas de medios y establezca un ancho de pantalla específico en píxeles cuando el elemento debería estar flotando.
Ahora que entendemos los conceptos básicos de CSS plataforma bienes raíces, echemos un vistazo más de cerca a cómo funciona.
¿Qué hace un flotador CSS?
En CSS, la propiedad float determina cómo flota un elemento. El flotador se eliminará del flujo normal de la página pero seguirá siendo parte del flujo, lo que significa que el flotador se moverá hacia la izquierda o hacia la derecha hasta que toque el borde del contenedor u otro flotador.
Esta es la diferencia clave entre plataforma CSS propiedad de posición absoluta y propiedad.
Si bien los elementos flotantes siguen siendo parte del flujo de la página, los elementos que usan absoluto el posicionamiento no lo son. Esto significa que los elementos flotantes afectarán la posición de otros elementos y viceversa. Por otro lado, los elementos absolutamente posicionados no afectarán la posición de otros elementos, ni otros elementos afectarán su posición.
Ahora que entendemos cómo plataforma La propiedad funciona, veamos cómo usarla en CSS.
Cómo usar Float en CSS
Usar plataforma en CSS, todo lo que necesitas es un selector de CSS y uno definido plataforma propiedad dentro de los paréntesis. Así que la sintaxis sería algo como esto:
element { float: value; }
Tiempo plataforma se ejecutará por sí solo, a menudo verá esto junto con margen bienes raíces. Crear un espacio alrededor de elementos flotantes puede ayudar a mejorar la apariencia del diseño.
Ejemplos de punto flotante CSS
Ahora veamos algunos casos de uso específicos. plataforma propiedad.
¿Cómo pasar el cursor sobre una imagen en CSS?
Suponga que desea que la imagen flote a la derecha del texto en el contenedor. Puede usar el selector de tipo para dirigir una imagen y definirla con una regla flotar: a la izquierda o flotador: a la derecha.
Aquí está el CSS:
img { float: right; }
Aquí está el código HTML:
<h2>CSS Float Property: Right Value</h2>
<h2>CSS Float Property: Right Value</h2>
<p><img src="https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400" alt="surfer holding a surfboard walking in the ocean">In this example, the CSS float property is defined by the right value. That tells the browser two things. The first is that the image floats to the right in the paragraph. The second is that the text in the paragraph wraps around the image. Notice that the CSS includes a type selector to target the image, which is contained in the paragraph.</p>
Aquí está el resultado:
ver la pluma Propiedad de punto flotante CSS: el valor correcto de Christina Perricone (@hubspot) en CódigoPen.
Compare cómo se ve la imagen en la página siguiente cuando plataforma la propiedad no se aplica.
ver la pluma Propiedad de punto flotante CSS: Ninguno de Christina Perricone (@hubspot) en CódigoPen.
¿Cómo hacer flotar otros elementos HTML en CSS?
Como se mencionó anteriormente, puede nadar cualquier elemento HTML en CSS, no solo imágenes.
Suponga que desea que el botón flote a la izquierda del texto en el contenedor. Puede usar el selector de clase para apuntar botón clase y definirla con una regla flotar: a la izquierda o flotador: a la derecha. También verá las reglas de CSS que definen el color, el tamaño, el borde, el relleno y los márgenes del botón.
Aquí está el CSS:
.button {
float: left;
background: gray;
font-size: 48px;
color: white;
padding: 3px;
border-radius: 5px;
border: 3px solid black;
margin-right: 10px;
}
Aquí está el código HTML:
<h2>CSS Float Property: Button</h2>
<p><button class="button">Click me!</button>In this example, the CSS float property is defined by the left value. That makes the button float to the left in the paragraph and makes the text in the paragraph wrap around the button. Margin settings have also been added to add some space between the text and the button. This makes it easier to read and more visually appealing. Notice that the CSS includes a class selector to target the button defined by the button class.</p>
Aquí está el resultado:
ver la pluma Propiedad de punto flotante CSS: botón de Christina Perricone (@hubspot) en CódigoPen.
¿Cómo hacer flotar varios elementos en CSS?
Ahora supongamos que quiero mover tanto la imagen como el botón a la izquierda. El botón solo se moverá hacia la izquierda tanto como la imagen (y la configuración del margen lo permita). Mira abajo.
Aquí está el CSS:
.button {
float: left;
background: gray;
font-size: 48px;
color: white;
padding: 3px;
border-radius: 5px;
border: 3px solid black;
margin-right: 15px;
}
img {
float: left;
margin-right: 15px;
width: 70px;
height: 70px;
}
Aquí está el código HTML:
<h2>CSS Float Property: Multiple Elements</h2>
<p>
<img src="https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400" alt="surfer holding a surfboard walking in the ocean">
<button class="button">Click me!</button>
In this example, the CSS float property is defined by the left value. That makes the button float to the left in the paragraph and makes the text in the paragraph wrap around the button. Margin settings have also been added to add some space between the text and the button. This makes it easier to read and more visually appealing. Notice that the CSS includes a class selector to target the button defined by the button class.
</p>
Este es el resultado (nota: es posible que deba alejar el zoom hasta 0,5x para ver el efecto completo).
ver la pluma Propiedad de punto flotante CSS: elementos múltiples de Christina Perricone (@hubspot) en CódigoPen.
Cómo borrar la propiedad Float en CSS
Aunque útil, plataforma propiedad puede causar problemas de diseño. Considere lo que sucede si un elemento contenedor como un
Este tipo de problemas se pueden resolver con brillante propiedad en CSS. Esta propiedad le permite «borrar» elementos flotantes a la izquierda, a la derecha oa ambos lados del elemento.
los brillante la propiedad se puede especificar con cualquiera de los siguientes valores:
- No (predeterminado): se permiten elementos flotantes en ambos lados del elemento borrado.
- izquierda: No se permiten elementos flotantes en el lado izquierdo del elemento borrado.
- ley: No se permiten elementos flotantes en el lado derecho del elemento borrado.
- Ambas cosas: No se permiten elementos flotantes en ambos lados del elemento borrado.
- heredar: El elemento hereda el valor puro de su padre.
Aplicará con más frecuencia brillante a un elemento que sigue inmediatamente al elemento flotante. Suponga que desea borrar el elemento flotante del lado izquierdo (en otras palabras, no desea ningún elemento flotante en el lado izquierdo del elemento definido). Entonces tienes que emparejar brillante abajo plataforma.
Entonces, si un elemento está flotando hacia la derecha, el siguiente elemento debe borrarse a la derecha. De esta forma, el elemento flotante flotará a la derecha y el elemento borrado aparecerá debajo de él.
Considere este ejemplo: observe que div 2 viene después de div 1 en HTML. Sin embargo, dado que el div 1 fluye hacia la derecha, el texto del div 2 fluye alrededor del div 1.
ver la pluma Propiedad de punto flotante CSS: no Borrar de Christina Perricone (@hubspot) en CódigoPen.
Para evitar que el texto en div2 fluya alrededor de div1, puede usar brillante la propiedad que mueve el div 2 debajo del div 1 derecho. Este es el resultado:
ver la pluma Propiedad de punto flotante CSS: con Borrar de Christina Perricone (@hubspot) en CódigoPen.
Usa elementos flotantes en tu diseño
Entender cómo usar y desechar plataforma una función en CSS puede ayudar a crear diseños limpios que deleitarán a sus visitantes. Solo necesita un poco de conocimiento de HTML y CSS para dominar esta propiedad.
Nota del editor: esta publicación se publicó originalmente en mayo de 2020 y se actualizó para que esté completa.
