css - example - ¿Qué métodos de ''clearfix'' puedo usar?

w3 clearfix

Question

Tengo el viejo problema de una div envuelve un diseño de dos columnas. Mi barra lateral está flotando, por lo que mi div contenedor no puede envolver el contenido y la barra lateral.

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

Parece que hay numerosos métodos para solucionar el error claro en Firefox:

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

En mi situación, el único que parece funcionar correctamente es la solución <br clear="all"/> , que es un poco desaliñada. overflow:auto me da barras de desplazamiento desagradables, y overflow:hidden seguramente 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?

Answer 1

A diferencia de otros arreglos transparentes, aquí hay uno abierto sin contenedores

Otros arreglos transparentes requieren que el elemento flotante esté en un contenedor bien marcado o necesita un <div> semánticamente vacío adicional. A la inversa, una clara separación del contenido y el marcado requiere una solución CSS estricta para este problema.

El mero hecho de que uno tiene que marcar el final de un flotante, no permite la tipografía CSS desatendida .

Si este último es su objetivo, el flotador debe dejarse abierto para que cualquier cosa (párrafos, listas ordenadas y desordenadas, etc.) lo envuelva, hasta que se encuentre un "clearfix". Por ejemplo, el clearfix puede ser establecido por un nuevo encabezado.

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

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

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

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

Answer 2

¿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 exteriores. Esto significa que los descendientes dentro de un elemento deben poder usar clear: both y no deben interactuar con flotadores fuera del elemento.

Contextos de formateo de bloques

Solo hay una manera 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 sus descendientes flotantes, y ningún flotante fuera del contexto de formato de bloque puede interactuar con los elementos internos. Este aislamiento bidireccional 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-block con width: 100% . (Por supuesto, existen las advertencias habituales con el uso de width: 100% , así que use box-sizing: border-box o poner padding , margin y border en 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. (Puede extenderse 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 esta solución se construye desde cero.

Métodos tradicionales de corrección de fallos considerados dañinos

El problema con las soluciones tradicionales de http://www.positioniseverything.net/easyclearing.html es que utilizan dos conceptos de representación diferentes para lograr el mismo objetivo para IE y para 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 ( :after ) con clear: both , que no establecen 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 .

Answer 3

¿Has probado esto?

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

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

Answer 4

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

Fo me es realmente mejor usar:

<br style="clear:both" />

Y si no desea ningún estilo en su html, solo tiene que usar la clase para su descanso y poner .clear { clear:both; } .clear { clear:both; } en tu CSS.

Ventaja de esto:

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

Answer 5

Clearfix desde bootstrap:

.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}

Answer 6

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

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

Y luego usarlo con contenedores problemáticos, por ejemplo:

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

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

Answer 7

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;
}
}

Answer 8

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

Manténgase alejado de flotadores siempre que sea posible

Vale la pena mencionar, evito flotadores como el ébola. Hay muchas razones y no estoy solo; Lee la respuesta de Rikudo sobre lo que es un clearfix y verás 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...

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

Flota mal comportamiento y despeja fallidos

En primer lugar, a veces, puedes pensar que estás a salvo de flotadores hasta que tu salvavidas sea perforado y tu flujo html comience a hundirse:

En el codepen http://codepen.io/omarjuvera/pen/jEXBya continuación, la práctica de despejar un flotador con <div classs="clear"></div> (u otro elemento) es común pero está mal vista y es anti semántico.

<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 vuelve más y más pequeño, se ven comportamientos extraños como en el gráfico a continuación (Mismo http://codepen.io/omarjuvera/pen/jEXBya ):

¿Por qué debería importarte? 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 / computadoras portátiles ya no son rey.

Esto no acaba ahí

Este no es el único problema con flotadores. Hay muchas, pero en este ejemplo, algunos pueden decir que all you have to do is to place your floats in a container . Pero como se puede ver en el codepen y el gráfico, ese no es el caso. Al parecer, hizo las cosas peor:

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!

Lo menos que sabes es que comenzarás una fiesta de CSS, invitando a todo tipo de selectores y propiedades a la fiesta; haciendo un lío más grande de tu CSS que con lo que empezaste. Sólo para arreglar tu flotador.

CSS Clearfix al rescate

Esta pieza de CSS simple y muy adaptable 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 contentos 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 en su forma más simple. En otras palabras, mantendrá su contenedor flotante bajo control y previniendo inundaciones. Por último, proporciona soporte para navegadores antiguos, todo en un pequeño corte de karate =)

Aquí está el clearfix de nuevo

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

Answer 9

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

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

• css flexbox
• rejilla css

Soluciones Clearfix modernas

Contenedor con overflow: auto;

La forma más sencilla de borrar elementos flotantes es usar el overflow: auto estilo overflow: auto en 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>

Un inconveniente, al usar ciertas combinaciones de margen y relleno en el elemento externo puede hacer que aparezcan barras de desplazamiento, pero esto puede resolverse colocando el margen y el relleno en otro elemento principal que contenga.

El uso de ''overflow: hidden'' también es una solución clara, pero no tendrá barras de desplazamiento, sin embargo, el uso de hidden recortará el contenido ubicado fuera del elemento que lo contiene.

Nota: el elemento flotante es una etiqueta img en este ejemplo, pero podría ser cualquier elemento html.

Clearfix recargado

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

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

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

⋮

⋮

Soluciones Clearfix más antiguas

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

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

Se enumeran aproximadamente en orden cronológico.

"Beat That ClearFix", un clearfix para los navegadores modernos

Thierry Koblentz ''de CSS Mojo ha señalado que al apuntar a los navegadores modernos, ahora podemos soltar el zoom y ::before propiedades y valores anteriores 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 advertencia : si comienza un nuevo proyecto desde cero, hágalo, pero no intercambie esta técnica con la que tiene ahora, porque aunque no es compatible con oldIE, sus reglas existentes lo impiden. colapso de márgenes ".

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

Este método básico se prefiere 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 del width: 100% en el contenedor.

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

En lugar de usar la propiedad de display 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 eliminar flotantes utilizando la propiedad de overflow es usar el guión de subrayado . IE aplicará los valores prefijados con el subrayado, otros navegadores no lo harán. La propiedad de zoom activa 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 de "Limpieza fácil" tiene la ventaja de permitir que los elementos posicionados se cuelguen fuera de los límites del contenedor, a costa de un CSS más complicado.

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

Elemento usando la propiedad "clear"

La solución rápida y sucia (con algunos inconvenientes) para cuando se golpea 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 según las consultas de los medios. Una solución en CSS puro es más ideal.
• Agrega marcas html sin agregar necesariamente ningún valor semántico.
• Requiere una definición y solución en línea para cada instancia en lugar de una referencia de clase a una solución única de un "clearfix" en el css y las referencias de clase a la misma en el html.
• Hace que sea difícil trabajar con el código para otros, ya que es posible que tengan que escribir más hacks para solucionarlo.
• En el futuro, cuando necesite / desee utilizar otra solución de clearfix, no tendrá que volver atrás y eliminar todas las <br style="clear: both" /> alrededor del marcado.

Answer 10

El nuevo estándar, tal como lo usan Inuit.css y Bourbon , dos frameworks CSS / Sass muy usados ​​y bien mantenidos:

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

Notas

Tenga en cuenta que los arreglos transparentes son esencialmente un truco para lo que los diseños de flexbox ahora pueden proporcionar de una manera mucho más inteligente . Los flotadores de CSS se diseñaron originalmente para que el contenido en línea fluyera, como imágenes en un artículo textual 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 estar soportando IE7. Al hacerlo, continúa exponiendo a los usuarios a explotaciones de seguridad no fijadas y hace la vida más difícil para 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 here en julio de 2012. Arroja un 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 display: block lugar de display: table (nuevamente, crédito a Thierry Koblentz).

Answer 11

El uso de overflow:hidden / auto y height para ie6 será suficiente si el contenedor flotante tiene un elemento padre.

Cualquiera de las #test # podría funcionar, para el HTML que se indica 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 niega a trabajar con ie6, simplemente haga flotar el padre para borrar float.

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

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

Answer 12

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+

Incluyendo el: antes del selector no es necesario borrar los flotadores, pero evita que los márgenes superiores se colapsen en los navegadores modernos. Esto asegura que haya una consistencia visual con IE 6/7 cuando se aplica zoom: 1.

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

Answer 13

He encontrado un error en el método oficial de CLEARFIX: el DOT no tiene un tamaño de fuente. Y si establece la height = 0 y 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 de YAML-Layout ... Eche un vistazo, ¡es muy interesante! http://www.yaml.de/en/home.html

Answer 14

He intentado todas estas soluciones, se agregará un gran margen al elemento <html> automáticamente cuando uso 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; a la CSS anterior.

Answer 15

La propiedad de desbordamiento se puede usar para eliminar flotantes sin margen adicional:

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

Answer 16

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

.clearfix{
clear:both
}

Y luego llámelo 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>

Answer 17

Recomiendo usar lo siguiente, que se toma 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;
}

Answer 18

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

Answer 19

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 */
}

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

Answer 20

También podrías poner esto en tu CSS:

.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */

Y agrega la clase "cb" a tu div padre:

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

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

Answer 21

Un clearfix es una forma en que un elemento se borra automáticamente después de sí mismo, de modo que no es necesario 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 necesitarías hacer algo como sigue:

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

Answer 22

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

display: flow-root;

A partir de la especificación w3: "El elemento genera un cuadro de contenedor de bloques y distribuye su contenido mediante un 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 alternativo, como el siguiente, puede ser de utilidad: https://github.com/fliptheweb/postcss-flow-root

Answer 23

Yo 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 a nivel de bloque. OMI, aplicándolo de forma predeterminada en los 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 facilitó mucho más agregar soporte para navegadores más antiguos a Cascade Framework (que admite IE6-8 así como a los navegadores modernos).

Answer 24

Yo solo uso: -

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

Funciona mejor y es compatible con IE8 + :)

Answer 25

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

Lo mismo con el envoltorio, necesitarías convertirlo en un contexto de formato de bloque para envolver las dos columnas.

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

Answer 26

honestamente; Todas las soluciones parecen ser un truco para corregir un error de representación ... ¿me equivoco?

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

También utilizo la display: hidden solución display: hidden , que es excelente y no requiere declaraciones de clase adicionales ni marcas html ... pero a veces necesitas los elementos para desbordar el contenedor, por ejemplo. bonitas cintas y fajas

Answer 27

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
<div id="content">text 1 </div>
<div id="sidebar">text 2</div>
<div class="clear"></div>
</div>

Answer 28

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

Hay otros conceptos diferentes de desarrolladores sobre clearfix http://www.wpreads.com/2013/03/floating-elements-css-clearfix.html