Diseño CSS: claro y claro

Tabla de contenido

    Mostrar tabla de contenidos

La propiedad CSS clear

Cuando usamos la propiedad float y queremos el siguiente elemento debajo (ni a la derecha ni a la izquierda), tendremos que usar clear propiedad.

La propiedad clear especifica qué debería suceder con el elemento que está al lado de un elemento flotante.

La propiedad clear puede tener una de las siguientes siguientes valores:

none

- El elemento no se empuja debajo de los elementos flotantes izquierdo o derecho. Esto es predeterminado

left

- El elemento se empuja debajo de los elementos flotantes a la izquierda.

right

- El elemento se empuja debajo de los elementos flotantes derechos.

both

- El elemento se empuja debajo de los elementos flotantes izquierdo y derecho.

inherit

- El elemento hereda el valor claro de su padre.

Al borrar flotadores, debes hacer coincidir el borrado con el flotador: si un elemento flota hacia la izquierda, entonces debes despejar hacia la izquierda. Tu elemento flotante continuará flotando, pero el elemento borrado aparecerá debajo en la web página.

Ejemplo

Este ejemplo borra el flotador a la izquierda. Aquí, significa que el El elemento se empuja debajo del elemento flotante izquierdo:

div1 {
  float: left;
}
div2 {
  clear: left;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

El truco clearfix

Si un elemento flotante es más alto que el elemento contenedor, se "desbordará" fuera de su contenedor. Luego podemos agregar un truco clearfix a resuelve este problema:

Without Clearfix

With Clearfix

Ejemplo

.clearfix {
  overflow: auto;
}

Pruébelo usted mismo →

<!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>

<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="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

El clearfix overflow: auto funciona bien siempre y cuando puedas mantener el control de tus márgenes y el relleno (de lo contrario, es posible que vea barras de desplazamiento). El Sin embargo, el nuevo y moderno truco clearfix es más seguro de usar y el siguiente código se utiliza para la mayoría de las páginas web:

Ejemplo

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</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="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Aprenderá más sobre el pseudoelemento ::after en un capítulo posterior.