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, use la propiedad de desbordamiento de CSS configurando su valor como automático para superar y solucionar el problema.
Ejemplo: en la imagen de abajo, el logotipo no encaja en el elemento div. Para solucionar este problema, hay dos formas. El primero es aumentando la altura del bloque div y el segundo mediante el uso de la propiedad CSS clearfix.
Entenderemos estos conceptos su implementación a través de los ejemplos.
Consulte el artículo CSS Float para comprender el concepto flotante en CSS.
Ejemplo 1: en el siguiente código, el problema se soluciona sin usar la propiedad de desbordamiento .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS code to show the working
of this property -->
<style>
div {
border: 3px solid green;
padding: 10px;
height: 200px;
text-align: justify;
}
img {
float: right;
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
alt="Pineapple"
width="200"
height="200">
GATE(Graduate Aptitude Test in Engineering) is one the most
important and in-demand entrance exam for engineering graduates
in our country. M.Tech. in Computer Science is one of the most
demanding courses at prestigious institutes like IISCs and IITs.
GATE(Graduate Aptitude Test in Engineering) is one of the ways
to get into these top institutes. Every year around 10 Lakh
candidates apply for GATE exam and very few of them manage to
ace the exam with good score. So the competition is clearly
very tough and simply preparing without any strategy will make
it difficult to land you into IISCs and IITs.
</div>
</body>
</html>
Producción:
Ejemplo 2: en este código, el problema se soluciona usando la propiedad de desbordamiento .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS code to show the working
of this property -->
<style>
div {
border: 3px solid green;
padding: 10px;
text-align: justify;
}
img {
float: right;
}
.gfg {
overflow: auto;
}
</style>
</head>
<body>
<div class="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
alt="Pineapple"
width="200"
height="200">
GATE(Graduate Aptitude Test in Engineering) is one the most
important and in-demand entrance exam for engineering graduates
in our country. M.Tech. in Computer Science is one of the most
demanding courses at prestigious institutes like IISCs and IITs.
GATE(Graduate Aptitude Test in Engineering) is one of the ways
to get into these top institutes. Every year around 10 Lakh
candidates apply for GATE exam and very few of them manage to
ace the exam with good score. So the competition is clearly
very tough and simply preparing without any strategy will make
it difficult to land you into IISCs and IITs.
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA