Saltar al contenido

Cómo usarlo y borrarlo

febrero 19, 2022
Site owner using css float to design page layout.jpgkeepProtocol

Imagina una revista impresa. Al hojear las páginas, verá texto e imágenes dispuestos de diferentes maneras. Tal vez haya una imagen en el centro con texto alrededor. Tal vez haya una imagen a la izquierda del párrafo de introducción. Tal vez haya una imagen con texto superpuesto encima.

Sin embargo, en su mayoría, 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 limita 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 hacer que el texto se ajuste a un elemento en un diseño; esto garantiza que mantengan el flujo de la página mientras maximizan el espacio.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Esa solución es la flotador propiedad en CSS. En esta publicación, veremos qué flotador es y lo que hace en CSS. Luego exploraremos cómo usar y borrar la propiedad. Empecemos.

los flotador La propiedad se puede especificar con cualquiera de los siguientes valores:

  • ninguna (predeterminado): el elemento no flota. Simplemente se muestra donde aparece en el texto.
  • izquierda: El elemento flota a la izquierda de su contenedor.
  • Correcto: El elemento flota a la derecha de su contenedor.
  • heredar: El elemento hereda el valor 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 hacer flotar elementos hacia el centro, la parte superior o la parte inferior de un contenedor, solo hacia la izquierda o hacia la derecha.

Si está utilizando el marco Bootstrap CSS para construir su sitio, entonces hay valores adicionales para crear flotantes receptivos. De lo contrario, deberá use consultas de medios y establezca el ancho de pantalla especificado en píxeles para cuando el elemento debe flotar.

Ahora que entendemos los conceptos básicos del CSS flotador propiedad, echemos un vistazo más de cerca a cómo funciona.

Esta es la diferencia clave entre el flotador property y la propiedad de posición absoluta en CSS.

Si bien los elementos flotantes siguen siendo parte del flujo de la página, los elementos que usan absoluto el posicionamiento no lo son. Eso significa que los elementos flotantes afectarán la posición de otros elementos y viceversa. Los elementos absolutamente posicionados, por otro lado, no afectarán la posición de otros elementos ni otros elementos afectarán su posición.

Ahora que entendemos cómo el flotador propiedad funciona, veamos cómo usarla en CSS.

Cómo usar flotante en CSS

Usar flotador en CSS, solo necesita un selector de CSS y el definido flotador propiedad dentro de los paréntesis. Así que la sintaxis sería algo como:

 

element { float: value; }

Tiempo flotador funcionará correctamente por sí solo, a menudo lo verá combinado con margen propiedades Crear espacio alrededor de los elementos flotantes puede ayudar a mejorar la apariencia del diseño.

Ejemplos de flotantes de CSS

Ahora, veamos algunos casos de uso específicos del flotador propiedad.

¿Cómo flotas una imagen en CSS?

Digamos que quiere que una imagen flote a la derecha del texto en un contenedor. Puede usar un selector de tipo para orientar la imagen y definirla con la regla flotador izquierdo o flotar derecho.

Aquí está el CSS:

 

img { float: right; }

Aquí está el 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 flotante de CSS: valor correcto de Christina Perricone (@hubspot) en CódigoPen.

Compare cómo aparece la imagen en la página siguiente cuando el flotador No se aplica la propiedad.

ver la pluma Propiedad flotante de CSS: ninguna de Christina Perricone (@hubspot) en CódigoPen.

¿Cómo flotas otros elementos HTML en CSS?

Como se mencionó anteriormente, cualquier elemento HTML puede flotar en CSS, no solo imágenes.

Digamos que quiere que un botón flote a la izquierda del texto en un contenedor. Puede utilizar un selector de clase para apuntar a la botón clase y definirla con la regla flotador izquierdo o flotar derecho. También verá reglas 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 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 flotante CSS: Botón de Christina Perricone (@hubspot) en CódigoPen.

¿Cómo flotas múltiples elementos en CSS?

Ahora digamos que quiero hacer flotar ambos elementos, la imagen y el botón, hacia la izquierda. El botón solo irá tan a la izquierda como la imagen (y su configuración de margen lo permita). Echa un vistazo a continuació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: 15px;

}

img {

float: left;

margin-right: 15px;

width: 70px;

height: 70px;

}

Aquí está el 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 a 0,5x para ver el efecto completo).

ver la pluma Propiedad flotante de CSS: elementos múltiples de Christina Perricone (@hubspot) en CódigoPen.

Cómo borrar la propiedad flotante en CSS

Si bien es útil, el flotador propiedad puede causar problemas de diseño. Considere lo que sucede si un elemento contenedor, como un

elemento, es demasiado pequeño para contener el elemento flotante. Cuando esto sucede, el elemento flotante se extenderá más allá de los límites de su elemento contenedor e interrumpirá otras partes de su página.

Problemas como este se pueden solucionar con el claro propiedad en CSS. Esta propiedad le permite «borrar» elementos flotantes del lado izquierdo, derecho o ambos lados de un elemento.

los claro La propiedad se puede especificar con cualquiera de los siguientes valores:

  • ninguna (predeterminado): se permiten elementos flotantes en ambos lados del elemento borrado.
  • izquierda: No se permiten elementos flotantes en el lado izquierdo del elemento borrado.
  • Correcto: No se permiten elementos flotantes en el lado derecho del elemento borrado.
  • ambas cosas: No se permiten elementos flotantes a ambos lados del elemento borrado.
  • heredar: El elemento hereda el valor claro de su padre.

Lo más común es que aplique el claro propiedad a un elemento que viene inmediatamente después de un elemento flotante. Digamos que desea borrar el flotador a la izquierda (en otras palabras, no desea ningún elemento flotante en el lado izquierdo del elemento definido). Luego, debe hacer coincidir el claro al flotador.

Entonces, si el elemento flota a la derecha, entonces el siguiente elemento debe borrarse a la derecha. De esa forma, el elemento flotante flotará hacia la derecha y el elemento borrado aparecerá debajo de él.

Considere este ejemplo: observe que div 2 viene después de div 1 en el HTML. Sin embargo, como el div 1 flota hacia la derecha, el texto del div 2 fluye alrededor del div 1.

ver la pluma Propiedad flotante de CSS: sin borrar de Christina Perricone (@hubspot) en CódigoPen.

Para evitar que el texto en div2 fluya alrededor de div1, puede usar el claro propiedad, que mueve el div 2 debajo del div 1 flotante a la derecha. Este es el resultado:

ver la pluma Propiedad flotante de CSS: con Clear de Christina Perricone (@hubspot) en CódigoPen.

Uso de elementos flotantes en su diseño

Entender cómo usar y borrar el flotador La propiedad en CSS puede ayudarlo a crear diseños limpios que deleiten a sus visitantes. Solo necesitará algunos conocimientos 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 sea más completa.

Nueva llamada a la acción