Tengo el viejo problema de divenvolver un diseño de dos columnas. Mi barra lateral está flotando, por lo que mi contenedor divno puede ajustar el contenido y la barra lateral.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Parece que existen numerosos métodos para corregir el error claro en Firefox:

• <br clear="all"/>
• overflow:auto
• overflow:hidden

En mi situación, la única que parece funcionar correctamente es la <br clear="all"/>solución, que es un poco desaliñada. overflow:autome da barras de desplazamiento desagradables y overflow:hiddenseguramente debe tener efectos secundarios. Además, IE7 aparentemente no debería sufrir este problema debido a su comportamiento incorrecto, pero en mi situación está sufriendo lo mismo que Firefox.

¿Qué método actualmente disponible para nosotros es el más robusto?

Dependiendo del diseño que se esté produciendo, cada una de las siguientes soluciones de clearfix CSS tiene sus propios beneficios.

El clearfix tiene aplicaciones útiles, pero también se ha utilizado como hack. Antes de usar una solución clara, quizás estas soluciones css modernas puedan ser útiles:

• css flexbox
• cuadrícula css

Soluciones modernas de Clearfix

Contenedor con overflow: auto;

La forma más sencilla de borrar elementos flotantes es usar el estilo overflow: autoen el elemento contenedor. Esta solución funciona en todos los navegadores modernos.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

Una desventaja, el uso de ciertas combinaciones de margen y relleno en el elemento externo puede hacer que aparezcan barras de desplazamiento, pero esto se puede resolver colocando el margen y el relleno en otro elemento que contiene el elemento principal.

El uso de 'overflow: hidden' también es una solución clara, pero no tendrá barras de desplazamiento, sin embargo, el uso hiddenrecortará cualquier contenido colocado fuera del elemento contenedor.

Nota: El elemento flotante es una imgetiqueta en este ejemplo, pero podría ser cualquier elemento html.

Clearfix Reloaded

Thierry Koblentz en CSSMojo escribió: El último clearfix recargado . Señaló que al abandonar el soporte para oldIE, la solución se puede simplificar a una declaración css. Además, el uso display: block(en lugar de display: table) permite que los márgenes se contraigan correctamente cuando los elementos con clearfix son hermanos.

.container::after {
  content: "";
  display: block;
  clear: both;
}

Esta es la versión más moderna de clearfix.

⋮

⋮

Soluciones Clearfix anteriores

Las siguientes soluciones no son necesarias para los navegadores modernos, pero pueden ser útiles para apuntar a navegadores más antiguos.

Tenga en cuenta que estas soluciones dependen de errores del navegador y, por lo tanto, solo deben usarse si ninguna de las soluciones anteriores funciona para usted.

Se enumeran aproximadamente en orden cronológico.

"Beat That ClearFix", un clearfix para navegadores modernos

Thierry Koblentz 'de CSS Mojo ha señalado que al apuntar a los navegadores modernos, ahora podemos soltar los zoomy ::before/ propiedad / valores y simplemente usar:

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

Esta solución no es compatible con IE 6/7 ... ¡a propósito!

Thierry también ofrece: " Una palabra de precaución : si comienza un nuevo proyecto desde cero, hágalo, pero no cambie esta técnica por la que tiene ahora, porque aunque no es compatible con oldIE, sus reglas existentes impiden márgenes de colapso ".

Micro Clearfix

La solución clearfix más reciente y adoptada a nivel mundial, la Micro Clearfix de Nicolas Gallagher .

Soporte conocido: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

Propiedad de desbordamiento

Se prefiere este método básico para el caso habitual, cuando el contenido posicionado no se mostrará fuera de los límites del contenedor.

http://www.quirksmode.org/css/clearing.html : explica cómo resolver problemas comunes relacionados con esta técnica, a saber, la configuración width: 100%en el contenedor.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

En lugar de usar la displaypropiedad para establecer "hasLayout" para IE, se pueden usar otras propiedades para activar "hasLayout" para un elemento .

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Otra forma de borrar flotantes usando la overflowpropiedad es usar el hack de subrayado . IE aplicará los valores prefijados con el guión bajo, otros navegadores no lo harán. La zoompropiedad desencadena hasLayout en IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Si bien esto funciona ... no es ideal usar hacks.

PIE: Método de limpieza fácil

Este antiguo método "Easy Clearing" tiene la ventaja de permitir que los elementos posicionados cuelguen fuera de los límites del contenedor, a expensas de CSS más complicado.

Esta solución es bastante antigua, pero puede aprender todo acerca de Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Elemento que usa la propiedad "clear"

La solución rápida y sucia (con algunos inconvenientes) para cuando estás abofeteando algo rápidamente:

<br style="clear: both" /> <!-- So dirty! -->

Inconvenientes

• No responde y, por lo tanto, puede no proporcionar el efecto deseado si los estilos de diseño cambian en función de las consultas de los medios. Una solución en CSS puro es más ideal.
• Agrega marcado html sin necesariamente agregar ningún valor semántico.
• Requiere una definición en línea y una solución para cada instancia en lugar de una referencia de clase a una única solución de un "clearfix" en el css y referencias de clase en el html.
• Hace que el código sea difícil de trabajar para otros, ya que pueden tener que escribir más hacks para solucionarlo.
• En el futuro, cuando necesite / desee usar otra solución clearfix, no tendrá que regresar y quitar todas las <br style="clear: both" />etiquetas que se encuentran alrededor del marcado.

¿Qué problemas estamos tratando de resolver?

Hay dos consideraciones importantes al flotar cosas:

1. Contiene flotadores descendientes. Esto significa que el elemento en cuestión se hace lo suficientemente alto como para envolver a todos los descendientes flotantes. (No cuelgan afuera)

   

2. Aislamiento de descendientes de flotadores externos. Esto significa que los descendientes dentro de un elemento deben poder usarlo clear: bothy no interactuar con flotantes fuera del elemento.

   

Contextos de formato de bloque

Solo hay una forma de hacer ambas cosas. Y eso es establecer un nuevo contexto de formato de bloque . Los elementos que establecen un contexto de formato de bloque son un rectángulo aislado en el que los flotadores interactúan entre sí. Un contexto de formato de bloque siempre será lo suficientemente alto como para envolver visualmente a sus descendientes flotantes, y ningún elemento flotante fuera de un contexto de formato de bloque puede interactuar con elementos en su interior. Este aislamiento de dos vías es exactamente lo que quieres. En IE, este mismo concepto se llama hasLayout , que se puede configurar a través de zoom: 1.

Hay varias formas de establecer un contexto de formato de bloque, pero la solución que recomiendo es display: inline-blockcon width: 100%. (Por supuesto, existen las advertencias habituales con el uso width: 100%, por lo que su uso box-sizing: border-boxo PUT padding, marginy borderen un elemento diferente.)

La solución más robusta.

Probablemente la aplicación más común de flotadores es el diseño de dos columnas. (Se puede extender a tres columnas).

Primero la estructura de marcado.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

Y ahora el CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Inténtalo tú mismo

Vaya a JS Bin para jugar con el código y ver cómo se construye esta solución desde cero.

Los métodos tradicionales de clearfix se consideran dañinos.

El problema con las soluciones tradicionales de clearfix es que usan dos conceptos de representación diferentes para lograr el mismo objetivo para IE y todos los demás. En IE usan hasLayout para establecer un nuevo contexto de formato de bloque, pero para todos los demás usan cajas generadas ( ) con , lo que no establece un nuevo contexto de formato de bloque. Esto significa que las cosas no se comportarán igual en todas las situaciones. Para obtener una explicación de por qué esto es malo, consulte Todo lo que sabe sobre Clearfix es incorrecto .:afterclear: both

El nuevo estándar, utilizado por Inuit.css y Bourbon , dos marcos CSS / Sass muy utilizados y bien mantenidos:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

Notas

Tenga en cuenta que las soluciones claras son esencialmente un truco para lo que los diseños de flexbox ahora pueden proporcionar de una manera mucho más inteligente . Los flotadores CSS se diseñaron originalmente para que el contenido en línea fluyera, como imágenes en un artículo de texto largo, y no para diseños de cuadrícula y similares. Si sus navegadores de destino son compatibles con flexbox , vale la pena investigarlo.

Esto no es compatible con IE7. No deberías apoyar IE7. Hacerlo continúa exponiendo a los usuarios a vulnerabilidades de seguridad no fijadas y dificulta la vida de todos los demás desarrolladores web, ya que reduce la presión sobre los usuarios y las organizaciones para cambiar a los navegadores modernos.

Este clearfix fue anunciado y explicado por Thierry Koblentz en julio de 2012. Elimina el peso innecesario del micro-clearfix 2011 de Nicolas Gallagher . En el proceso, libera un pseudo-elemento para su propio uso. Esto se ha actualizado para usar en display: blocklugar de display: table(nuevamente, crédito a Thierry Koblentz).

Recomiendo usar lo siguiente, que está tomado de http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

La propiedad de desbordamiento se puede usar para borrar flotadores sin marcas adicionales:

.container { overflow: hidden; }

Esto funciona para todos los navegadores, excepto IE6, donde todo lo que necesita hacer es habilitar hasLayout (el zoom es mi método preferido):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Encontré un error en el método oficial CLEARFIX: el DOT no tiene un tamaño de fuente. Y si configura height = 0y el primer Elemento en su DOM-Tree tiene la clase "clearfix", siempre tendrá un margen en la parte inferior de la página de 12px :)

Tienes que arreglarlo así:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Ahora es parte del diseño YAML ... Solo échale un vistazo, ¡es muy interesante! http://www.yaml.de/en/home.html

Esta es una solución bastante ordenada:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Se sabe que funciona en Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Incluir el selector: before no es necesario para borrar los flotadores, pero evita que los márgenes superiores se colapsen en los navegadores modernos. Esto garantiza que haya coherencia visual con IE 6/7 cuando se aplica zoom: 1.

De http://nicolasgallagher.com/micro-clearfix-hack/

Clearfix de bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Solo uso: -

.clear:after{
  clear: both;
  content: "";
  display: block;
}

Funciona mejor y es compatible con IE8 + :)

Dada la gran cantidad de respuestas que no iba a publicar. Sin embargo, este método puede ayudar a alguien, ya que me ayudó.

Manténgase alejado de las carrozas siempre que sea posible

Vale la pena mencionar que evito las carrozas como el ébola. Hay muchas razones y no estoy solo; Lea la respuesta de Rikudo sobre qué es un clearfix y verá lo que quiero decir. En sus propias palabras:...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Existen otras opciones buenas (y a veces mejores) que no sean flotantes. A medida que la tecnología avanza y mejora, flexbox (y otros métodos) serán ampliamente adoptados y los flotadores se convertirán en un mal recuerdo. Tal vez un CSS4?

Mala conducta del flotador y borrado fallido

En primer lugar, a veces, puede pensar que está a salvo de flotadores hasta que se perfora su salvavidas y su flujo html comienza a hundirse:

En el codepen http://codepen.io/omarjuvera/pen/jEXBya a continuación, la práctica de limpiar un flotador con <div classs="clear"></div>(u otro elemento) es común pero desaprobada y antisentica .

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Sin embargo , justo cuando pensabas que tu flotador es digno de navegar ... ¡boom! A medida que el tamaño de la pantalla se hace cada vez más pequeño, verá comportamientos extraños como en el gráfico a continuación (Mismo http://codepen.io/omarjuvera/pen/jEXBya ):

¿Por qué te debe importar? No estoy seguro de la cifra exacta, pero aproximadamente el 80% (o más) de los dispositivos utilizados son dispositivos móviles con pantallas pequeñas. Las computadoras de escritorio / portátiles ya no son el rey.

Esto no acaba ahí

Este no es el único problema con las carrozas. Hay muchos, pero en este ejemplo, algunos pueden decir all you have to do is to place your floats in a container. Pero como puedes ver en el codepen y el gráfico, ese no es el caso. Aparentemente empeoró las cosas:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

¿En cuanto al resultado?

¡Es lo mismo!

Al menos ya sabes, comenzarás una fiesta CSS, invitando a todo tipo de selectores y propiedades a la fiesta; haciendo un desorden más grande de tu CSS que con lo que comenzaste. Solo para arreglar tu flotador.

CSS Clearfix al rescate

Esta pieza simple y muy adaptable de CSS es una belleza y un "salvador":

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

¡Eso es! Realmente funciona sin romper la semántica y ¿mencioné que funciona? :

De la misma muestra ... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Ahora ya no necesitamos <div classs="clear"></div> <!-- Acts as a wall -->y mantenemos contenta a la policía semántica. Este no es el único beneficio. Este clearfix responde a cualquier tamaño de pantalla sin el uso de@media su forma más simple. En otras palabras, mantendrá su contenedor de flotador bajo control y evitará inundaciones. Por último, proporciona soporte para navegadores antiguos, todo en un pequeño karate chop =)

Aquí está el clearfix nuevamente

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Siempre floto las secciones principales de mi cuadrícula y aplico clear: both;al pie de página. Eso no requiere un div o clase extra.

honestamente; todas las soluciones parecen ser un truco para corregir un error de renderizado ... ¿estoy equivocado?

He encontrado <br clear="all" />que es el más fácil, el más simple. ver en class="clearfix"todas partes no puede afectar la sensibilidad de alguien que se opone a elementos de marketing extraños, ¿verdad? solo estás pintando el problema en un lienzo diferente.

También uso la display: hiddensolución, que es excelente y no requiere declaraciones de clase adicionales o marcado html ... pero a veces necesitas los elementos para desbordar el contenedor, por ejemplo. bonitas cintas y fajas

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

He probado todas estas soluciones, se agregará un gran margen al <html>elemento automáticamente cuando use el siguiente código:

.clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}

Finalmente, resolví el problema del margen agregando font-size: 0;al CSS anterior.

Con SASS, el clearfix es:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

y se usa como:

.container {
    @include clearfix;
}

si quieres el nuevo clearfix:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

Con LESS ( http://lesscss.org/ ), uno puede crear un útil ayudante clearfix:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

Y luego úselo con contenedores problemáticos, por ejemplo:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Usar overflow:hidden/ autoy height para ie6 será suficiente si el contenedor flotante tiene un elemento padre.

Cualquiera de las #test podría funcionar, para el HTML indicado a continuación para borrar flotantes.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

En los casos en que esto se niegue a trabajar con ie6, simplemente flote al padre para borrar el flotador.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Nunca realmente necesité ningún otro tipo de limpieza todavía. Tal vez es la forma en que escribo mi HTML.

Un nuevo valor de visualización parece al trabajo en una línea.

display: flow-root;

De la especificación W3: "El elemento genera una caja de contenedor de bloques y presenta su contenido utilizando el diseño de flujo. Siempre establece un nuevo contexto de formato de bloque para sus contenidos".

Información: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Como se muestra en el enlace anterior, el soporte actualmente es limitado, por lo que el soporte de respaldo como el siguiente puede ser útil: https://github.com/fliptheweb/postcss-flow-root

También flotaría #content, de esa manera ambas columnas contienen flotadores. También porque le permitirá borrar elementos dentro #contentsin borrar la barra lateral.

Lo mismo con el contenedor, necesitaría convertirlo en un contexto de formato de bloque para ajustar las dos columnas.

Este artículo menciona algunos desencadenantes que puede usar: contextos de formato de bloque .

Un clearfix es una forma en que un elemento se borra automáticamente después de sí mismo, por lo que no necesita agregar un marcado adicional.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

Normalmente debería hacer algo de la siguiente manera:

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

Con clearfix, solo necesitas

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

¿Por qué tratar de usar css hack para hacer lo que 1 línea de HTML hace el trabajo? ¿Y por qué no utilizar html semántico tu put break para volver a la línea?

Para mí es realmente mejor usar:

<br style="clear:both" />

Y si no quieres ningún estilo en tu html, solo tienes que usar class para tu descanso y poner .clear { clear:both; }tu CSS.

Ventaja de esto:

• Uso semántico de html para volver a la línea.
• Si no se carga CSS, funcionará
• No necesita código CSS adicional y Hack
• no es necesario simular el br con CSS, ya existe en HTML

Suponiendo que esté utilizando esta estructura HTML:

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

Aquí está el CSS que usaría:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

Uso este conjunto todo el tiempo y funciona bien para mí, incluso en IE6.

A diferencia de otras soluciones claras, aquí hay una abierta sin contenedores

Otras soluciones claras requieren que el elemento flotante esté en un contenedor bien marcado o necesitan un extra, semánticamente vacío <div>. Por el contrario, la separación clara de contenido y marcado requiere una solución CSS estricta para este problema.

El mero hecho de que uno necesite marcar el final de un flotante, no permite la composición de tipo CSS desatendida .

Si este último es su objetivo, el flotador debe dejarse abierto para cualquier cosa (párrafos, listas ordenadas y no ordenadas, etc.) para envolverlo, hasta que se encuentre un "clearfix". Por ejemplo, el clearfix puede establecerse con un nuevo encabezado.

Es por eso que uso el siguiente clearfix con nuevos encabezados:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Esta solución se utiliza ampliamente en mi sitio web para resolver el problema: el texto al lado de una miniatura flotante es corto y no se respeta el margen superior del siguiente objeto de limpieza.

También evita cualquier intervención manual al generar automáticamente archivos PDF desde el sitio. Aquí hay una página de ejemplo .

Siempre uso el micro-clearfix :

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

En Cascade Framework , incluso lo aplico por defecto en elementos de nivel de bloque. En mi opinión, aplicarlo de forma predeterminada en elementos de nivel de bloque proporciona a los elementos de nivel de bloque un comportamiento más intuitivo que su comportamiento tradicional. También me hizo mucho más fácil agregar soporte para navegadores antiguos a Cascade Framework (que es compatible con IE6-8 así como con navegadores modernos).

También podría poner esto en su CSS:

.cb:after{
  visibility: hidden;
  display: block;
  content: ".";
  clear: both;
  height: 0;
}

*:first-child+html .cb{zoom: 1} /* for IE7 */

Y agregue la clase "cb" a su div padre:

<div id="container" class="cb">

No necesitará agregar nada más a su código original ...

¿Has probado esto?

<div style="clear:both;"/>

No he tenido ningún problema con este método.

Mi método favorito es crear una clase clearfix en mi documento css / scss como se muestra a continuación

.clearfix{
    clear:both
}

Y luego llamarlo en mi documento html como se muestra a continuación

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

Es tan simple que clearfix aclara el problema cuando usamos las propiedades float dentro del elemento div. Si usamos dos elementos div, uno como flotante: left; y otro como flotador: derecho; podemos usar clearfix para el padre de los dos elementos div. Si nos negamos a usar clearfix, los espacios innecesarios se llenan con el contenido a continuación y la estructura del sitio se romperá.