¿Qué es un arreglo claro?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *