En este artículo, aprenderemos a borrar flotantes y el propósito de borrar flotantes en CSS. Antes de sumergirnos en este tema, conoceremos la propiedad float en CSS. La propiedad float en CSS se usa para cambiar el flujo normal de un elemento. La propiedad float define dónde debe estar el lado izquierdo o derecho del contenedor del lugar de un elemento.
Propósito de borrar flotantes en CSS: Limpiamos la propiedad flotante para controlar los elementos flotantes al evitar la superposición. En nuestra página web, si un elemento se ajusta horizontalmente junto a los elementos flotantes, a menos que apliquemos la propiedad clara igual que la dirección flotante, los elementos se moverán debajo de los elementos flotantes.
Sintaxis:
clear: none|right|left|both|initial|inherit;
Valores de propiedad:
- none: Es el valor por defecto de la propiedad clear . Después de usar este valor, el elemento no se empujará hacia la izquierda o hacia la derecha como elementos flotantes.
- right: este valor empuja el elemento justo debajo de los elementos flotantes.
- izquierda: este valor empuja el elemento a la izquierda debajo de los elementos flotantes.
- ambos: este valor empuja el elemento hacia la izquierda y hacia la derecha hacia los elementos flotantes.
- initial: cambie las propiedades a su valor predeterminado.
- heredar: hereda las propiedades flotantes de su elemento principal.
La mejor manera de entender el concepto de claro es usando un ejemplo.
Ejemplo 1: Hemos flotado una imagen a la izquierda de un texto como se muestra a continuación. Podemos ver que el elemento se empuja hacia la izquierda de la imagen debido al uso de la propiedad flotante .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h1>The clear Property</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100" height="132" />
<p>
The content will be shown
left to the image.
</p>
</body>
</html>
Producción:
Ejemplo 2: una vez que usemos la propiedad clara con el valor de la izquierda, el elemento se empujará debajo de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
p {
clear: left;
}
</style>
</head>
<body>
<h1>The clear Property</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
width="100" height="132" />
<p>
The content will be shown
left to the image.
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vikashgautam11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA