CSS FLOAT, Clear y Propiedades de desbordamiento | Explicado

Posicionar elementos HTML en los lugares apropiados es muy significativo al diseñar el diseño de un sitio web. CSS proporciona múltiples propiedades de posicionamiento que ayudan a los desarrolladores a estructurar mejor la posición de los elementos HTML.

Además de esto, durante el desarrollo del sitio web, a menudo nos encontramos con ciertas circunstancias en las que el contenido presente en ciertos elementos HTML desbordamiento. Para manejar tales situaciones, CSS también proporciona ciertas propiedades.

En esta guía, pasará por las siguientes propiedades de CSS.

1. Propiedad flotante
2. Propiedad clara
3. Propiedad de desbordamiento

Vamos a empezar.

Propiedad flotante

La propiedad flotante se conoce como una propiedad de posicionamiento que se utiliza para posicionar contenido y estructurar el diseño de un sitio web. Esta propiedad posiciona un elemento de tal manera que otros elementos lo envuelven.

Sintaxis

flotante: valor;

Al igual que otras propiedades de CSS, la propiedad Float representa ciertos valores que se enumeran a continuación.

Valor	Descripción
ninguno	Este es un valor predeterminado que evita que un elemento flote y muestra el elemento donde existe en el texto.
izquierda	Para flotar un elemento a la izquierda, este valor se usa.
bien	Para flotar un elemento a la derecha, este valor se usa.
inicial	Para asignar el valor original a la propiedad este valor se utiliza.
heredar	Para heredar esta propiedad desde su propiedad principal, este valor se utiliza.

Aquí hay algunos ejemplos de la propiedad flotante.

Ejemplo 1
Supongamos, está mostrando algún texto en su sitio web y desea agregar una imagen relevante al lado derecho del texto. Use el siguiente fragmento de código.

Html

Los perros son criaturas extremadamente leales. Son lindos, juguetones y son el mejor amigo de un hombre. Hay múltiples razas de perros. Algunas de las razas de perros son Bull Dog, Siberian Husky, Golden Retriever y muchas más.

CSS

img
flotar derecho;
Ancho: 190px;
Altura: 170px;

En el ejemplo anterior, hemos escrito algún texto en perros y hemos flotado la imagen del perro al lado derecho. Aquí está la salida.

La imagen del perro flotó a la derecha con éxito.

Si en el mismo ejemplo, la propiedad flotante se establece en "ninguno" en lugar de "correcto", entonces se mostrará la imagen del perro donde ocurre en el texto. Así es como se verá.

Ejemplo 2
A veces, para agregar belleza al texto que aparece en el sitio web, utiliza diferentes familias y tamaños de fuentes. Además de esto, flotar el texto a una posición apropiada también es bastante importante. Este ejemplo muestra cómo flotar una carta en un párrafo.

Html

DOGS son criaturas extremadamente leales. Son lindos, juguetones y son el mejor amigo de un hombre. Hay múltiples
razas de perros. Algunas de las razas de perros son Bull Dog, Siberian Husky, Golden Retriever y muchas más. Si estas pasando
depresión o cierta fase mala en la vida, acariciar a un perro es muy sugerido. Además de este perros también se usan para la seguridad
propósitos.

CSS

durar
flotador izquierdo;
Ancho: 0.8em;
Alganche de línea: 90%;
tamaño de fuente: 60px;
Font-Weight: Bold;
Font-Family: Times New Roman;

En el ejemplo anterior, estamos flotando la primera letra del texto a la izquierda y dándole cierto estilo. La salida se muestra a continuación.

La primera carta flotó a la izquierda con éxito.

Ahora que hemos entendido la propiedad CSS Float, aprendamos sobre la propiedad CSS Clear.

Propiedad clara

La propiedad clara también es una propiedad de posicionamiento que maneja los elementos que están al lado de los elementos que están flotando.

Si asigna una propiedad clara a un elemento en la misma dirección que el flotador, se empujará hacia abajo debajo de los elementos flotados, de lo contrario, si hay suficiente espacio, el elemento se ajustará junto al elemento flotado horizontalmente.

Sintaxis

claro: valor;

La propiedad clara exhibe algunos valores que se explican a continuación.

Valor	Descripción
ninguno	Este es un valor predeterminado que evita que los elementos flotados se limpien.
izquierda	Este valor posiciona los elementos a la izquierda de los elementos flotados.
bien	Este valor posiciona los elementos a la derecha de los elementos flotados.
ambos	Este valor posiciona elementos tanto hacia abajo como a la derecha de los elementos flotados.
inicial	Este valor asigna a la propiedad su valor original.
heredar	Para heredar esta propiedad desde su propiedad principal, este valor se utiliza.

Exploremos aún más la propiedad clara con la ayuda de ejemplos adecuados.

Ejemplo 1
Aprenderemos cómo funciona la propiedad clara utilizando el ejemplo del perro mencionado en la sección anterior.

Html

Los perros son criaturas extremadamente leales. Son lindos, juguetones y son el mejor amigo de un hombre. Hay múltiples razas de perros. Algunas de las razas de perros son Bull Dog, Siberian Husky, Golden Retriever y muchas más.

CSS

img
flotador izquierdo;
Ancho: 170px;
Altura: 170px;

Ahora en el ejemplo anterior hay dos elementos que son

y . Sin embargo, solo se está flotando a la izquierda. Ahora, para comprender cómo funciona la propiedad clara, se aplicaremos claramente al

elemento. Use el siguiente fragmento de código.

pag.claro
claro: izquierda;

Aquí hemos solicitado claro al

en la misma dirección que el flotador.

Producción
Antes de aplicar claro.

Después de aplicar claro.

El texto ha sido despejado a la izquierda hacia abajo de la imagen flotada.

Puede usar otros valores de la propiedad clara utilizando el ejemplo anterior para ver cómo funcionan.

Propiedad de desbordamiento

La propiedad de desbordamiento controla el comportamiento del contenido que desborda el área especificada de un elemento, además, la propiedad de desbordamiento está diseñada solo para elementos de nivel de bloque.

Sintaxis

desbordamiento: valor;

A continuación se proporcionan diferentes valores de la propiedad de desbordamiento:

Valor	Descripción
visible	Este es un valor predeterminado y mostrará todo el contenido que excede el área especificada del elemento.
oculto	Este valor oculta todo el contenido que excede el área especificada del elemento.
Desplazarse	Este valor oculta el contenido que excede el área del elemento dentro y proporciona barras de desplazamiento vertical y horizontal para ver el contenido.
auto	Este valor agrega una barra de desplazamiento solo cuando sea necesario.
inicial	Este valor asigna a la propiedad su valor original.
heredar	Para heredar esta propiedad desde su propiedad principal, este valor se utiliza.

Ahora, para una mejor comprensión de esta propiedad, vamos a considerar un ejemplo y, a través de eso, demostraremos diferentes valores de la propiedad de desbordamiento.

Ejemplo.

En este ejemplo, vamos a crear un y colocar un poco de contenido dentro de eso y ver cómo funcionan los diferentes valores de propiedad de desbordamiento.

Html

La propiedad de desbordamiento controla el comportamiento del contenido que desborda el área especificada de un elemento, además, la propiedad de desbordamiento está diseñada solo para elementos de nivel de bloque.

Primero ilustramos el valor visible de la propiedad de desbordamiento.

CSS

.Div1
desbordamiento: visible;
Color de fondo: Rosybrown;
Ancho: 100px;
Altura: 145px;
borde: 2px negro sólido;

Producción

Usando el valor visible de la propiedad de desbordamiento, el contenido se muestra fuera del área de la caja.

Ahora ilustraremos el valor oculto de la propiedad de desbordamiento. Aquí está el fragmento de código.

.Div1
desbordamiento: oculto;

Producción

El contenido que excede el área de la caja está oculto.

El fragmento de código para el valor de desplazamiento de la propiedad de desbordamiento es el siguiente.

.Div1
desbordamiento: desplazarse;

Producción

Usando las barras de desplazamiento, el resto del contenido se puede ver.

Y ahora veremos cómo funciona el valor automático de la propiedad de desbordamiento.

.Div1
desbordamiento: auto;

Producción

Según el requisito, el valor automático solo agregó la barra de desplazamiento vertical.

Usando el valor automático, el contenido desbordante está oculto dentro del cuadro con éxito.

Conclusión

El propiedad flotante se utiliza para posicionar contenido y estructurar el diseño de un sitio web, además, esta propiedad posiciona un elemento de tal manera que otros elementos lo envuelven. El propiedad clara, Por otro lado, maneja los elementos que están al lado de los elementos que están flotando. Mientras tanto, el propiedad de desbordamiento controla el comportamiento del contenido que desborda el área especificada de un elemento. Todas estas propiedades exhiben ciertos valores que realizan diferentes acciones en estas propiedades. Estas propiedades y sus valores se explican en profundidad con la ayuda de ejemplos en este artículo.