En este artículo, veremos qué es la propiedad CSS de clearfix y cómo es útil, además de comprender las diferentes formas de implementarla a través de los ejemplos.
La asignación de una serie de propiedades CSS a un elemento principal que envolverá a sus elementos secundarios flotantes es una técnica común en los diseños basados en elementos flotantes de CSS. Esta técnica generalmente se implementa usando una clase llamada clearfix . Por lo tanto, no es una propiedad de CSS sino un simple truco que permite que un contenedor envuelva a sus hijos flotantes.
Sintaxis:
.clearfix{
...
}
Clearfix se usa generalmente cuando se necesita apilar elementos flotantes horizontalmente. Sin clearfix, el contenedor con elementos secundarios flotantes colapsará como si sus elementos secundarios estuvieran colocados exactamente como se muestra a continuación:
La implementación de clearfix se puede hacer de varias maneras, como mediante el uso de la propiedad de desbordamiento que ayuda a controlar el desbordamiento del contenido del cuadro del elemento. La propiedad de visualización también ayuda al especificar el comportamiento de visualización de un elemento, es decir, depende del tipo de cuadro de representación que contiene el elemento. Entenderemos todos esos conceptos secuencialmente.
Uso de propiedad de desbordamiento : es la implementación más común de clearfix mediante la asignación de propiedad de desbordamiento con un valor cualquier cosa menos visible porque creará un nuevo contexto de formato de bloque (BFC) .
Sintaxis:
.clearfix{
overflow: auto | hidden | scroll;
}
Usando display-property : También podemos implementar clearfix asignando display-property a inline-block o flow-root . Esto también creará un nuevo BFC.
Sintaxis:
.clearfix{
display: inline-block | flow-root;
}
Ejemplo 1: este ejemplo de código demuestra el problema cuando no usamos un arreglo claro.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 4px solid black;
width: 650px;
font-size: 24px;
padding: 20px;
}
.box {
float: left;
font-size: 24px;
height: 150px;
width: 250px;
color: white;
background: green;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Our container without a clearfix</h3>
<div class="container">
Container with 20px padding
<span class="box">
Floating Child
</span>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra cómo se usa la propiedad de desbordamiento para resolver el problema anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.clearfix {
overflow: hidden;
border: 4px solid black;
width: 650px;
font-size: 24px;
padding: 20px;
}
.box {
float: left;
font-size: 24px;
height: 150px;
width: 250px;
color: white;
background: green;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Our container with a clearfix
(using overflow-property)
</h3>
<div class="clearfix">
Container with overflow:hidden;
<span class="box">
Floating Child
</span>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo demuestra cómo se utiliza la propiedad de visualización para resolver el problema anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.clearfix {
display: inline-block;
border: 4px solid black;
width: 650px;
font-size: 24px;
padding: 20px;
}
.box {
float: left;
font-size: 24px;
height: 150px;
width: 250px;
color: white;
background: green;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Our container with a clearfix
(using display-property)
</h3>
<div class="clearfix">
Container with display:inline-block;
<span class="box">
Floating Child
</span>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA