En este artículo, aprenderemos varias técnicas para limpiar el flotador . 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 colocarse un elemento (a la derecha o a la izquierda) en un contenedor.
Propósito de borrar flotantes en CSS: Limpiamos la propiedad flotante para controlar los elementos flotantes al evitar la superposición.
Diversas técnicas para despejar el flotador
Clear property: La propiedad clear se usa para especificar qué lado de los elementos flotantes no pueden flotar. Establece la posición del elemento respecto a los objetos flotantes. El elemento puede caber horizontalmente en el espacio junto a otro elemento que flota. Tenemos que aplicar la propiedad clear a ese elemento en la misma dirección que el flotador para que el elemento se mueva hacia abajo por debajo del elemento flotante.
Sintaxis:
clear: none|left|right|both|initial;
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.
Ejemplo: En este ejemplo, hemos utilizado el valor izquierdo de la propiedad clear para especificar que el elemento de párrafo no puede flotar en el lado izquierdo con respecto a otros elementos flotantes.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
width: 100;
}
p {
clear: left;
}
</style>
</head>
<body>
<h2>clear property</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
<p>
This will specify that paragraph element
is not allowed to float on the left side
in relation to other element.
</p>
</body>
</html>
Producción:
El método de desbordamiento: un clearfix es una forma en que un elemento borra o corrige automáticamente sus elementos para que no necesite agregar marcas adicionales. Generalmente se usa en diseños flotantes donde los elementos flotan para apilarse horizontalmente. Si el elemento es más alto que el elemento que lo contiene, utilice la propiedad de desbordamiento de CSS estableciendo su valor como automático para superar y solucionar el problema.
Ejemplo: En este ejemplo, hay dos elementos HTML div con imágenes flotando a la derecha. La altura de la imagen flotante es más alta que los elementos div que contienen la imagen, por lo que la imagen se desbordará fuera del contenedor. En el segundo elemento div con el nombre de clase » clearfix «, hemos agregado el valor de propiedad de desbordamiento a automático para solucionar el problema.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<div>
<img class="img1" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
alt="GFG" width="170" height="170" />
A clearfix is a way for an element
to automatically clear or fix its
elements so that it does not need
to add additional markup. It is
generally used in float layouts
where elements are floated to be
stacked horizontally.
</div>
<h2 style="clear:right">With Clearfix</h2>
<div class="clearfix">
<img class="img2" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
alt="GFG" width="170" height="170" />
A clearfix is a way for an element to
automatically clear or fix its elements
so that it does not need to add additional
markup. It is generally used in float
layouts where elements are floated to
be stacked horizontally.
</div>
</body>
</html>
Producción:
ClearFix Hack: Es el nuevo hack moderno de clearfix ya que es mucho más seguro de usar. Con overflow: auto , tenemos que ajustar el margen y el relleno en consecuencia, de lo contrario, se crearán barras de desplazamiento. Por lo tanto, es mejor usar un nuevo truco Clearfix moderno . Este método utiliza un pseudo-selector CSS ::after para borrar los flotantes.
Sintaxis:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Ejemplo: En este ejemplo, hay dos elementos HTML div con imágenes flotando a la derecha. En este ejemplo, hemos creado dos elementos HTML div con imágenes flotando a la derecha. Pero la altura de la imagen flotante es más alta que los elementos div que contienen la imagen, por lo que la imagen se desbordará fuera de su contenedor. Ocurre en el primer elemento div de HTML . En el segundo elemento div con el nombre de clase «clearfix», hemos utilizado el truco clearfix para solucionar el problema.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>
This image is floated to the right.
It is also taller than the element
containing it, so it overflows
outside of its container:
</p>
<div>
<img class="img1" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG" width="170" height="170" />
Without adding clearfix hack
to the containing element
</div>
<h2 style="clear:right">
With New Modern Clearfix
</h2>
<div class="clearfix">
<img class="img2" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG" width="170" height="170" />
Add the clearfix hack to the containing
element, to fix this problem:
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA