¿Qué métodos de 'clearfix' puedo usar?


864

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?


1
Yo uso jqui.net/tips-tricks/css-clearfix me ayuda a ocultar el punto :)
Val

1
¿Qué pasa con IE 6 y IE 7? Nunca siguen la forma correcta de limpiar las cosas.
Praveen Kumar Purushothaman

Ahora que hemos pasado un año, ¿hay alguna posibilidad de revisar la respuesta correcta al clearfix moderno de tres líneas descrito aquí , como se usa en los marcos de renombre Bourbon e Inuit.css? Vea mi respuesta a continuación .
iono

Respuestas:


1039

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:


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.

25
@David Rivers: El método after no es un truco, ya que no explota un error de análisis en un navegador, utiliza una función de css como solución. Además: after será compatible con futuros navegadores, a diferencia del hack de subrayado. Idealmente, habrá una propiedad css que se puede aplicar a un elemento que hará que contenga todo su contenido.
Beau Smith

77
Gracias por el desglose. Encuentro que: después del método de "limpieza fácil" es superior al "desbordamiento: oculto", ya que no recorta las sombras de los cuadros CSS3 ni los elementos posicionados. Las líneas adicionales de código definitivamente valen la pena.
Aneon

77
No estoy abogando por la solución clara: ambas soluciones, pero no estoy de acuerdo con su etiquetado 'sucio'. El argumento de 'agregar peso / cargar más lento' parece una tontería, ya que es 1 línea corta de código html, en comparación con las varias líneas de CSS (que su navegador también debe cargar). Para el argumento del 'valor semántico', un br con claro: ambos son mucho más fáciles de entender que tratar de descubrir un montón de tontos css de pelotones de fusilamiento. br claro: ambos son cortos y simples, y en mi humilde opinión no tiene ningún efecto sobre el "profesionalismo".
Vigrond

16
Contrariamente a la creencia popular, overflow: hiddeno overflow: autono borra los flotadores (categorizarlo como "clearfix" es un nombre inapropiado); en su lugar, hace que un elemento cree un nuevo contexto de formato dentro del cual se pueden contener los flotantes. Esto hace que el contenedor se estire a la altura de los flotadores para contenerlos. No hay autorización en absoluto; dicho esto, aún puede elegir borrar o no borrar los flotadores dentro del contenedor, dependiendo de su diseño.
BoltClock

3
Ya no deberíamos admitir IE7.
Actualice

70

¿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)

    Contenido flotante colgando fuera de su contenedor

  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.

    <code> clear: both </code> interactuando con un flotante en otra parte del DOM

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


¿Cuáles son "las advertencias habituales con el uso width: 100%"? Además, ¿sugieres usar zoom: 1en ¶1 de §2?
Baumr

Respuesta interesante, pero ¿qué pasa con el overflow: hiddenconcepto de representación que invoca? ¿Y cómo puede ser diferente a hasLayout?
Baumr

Es cierto, pero si se evita usar position: absolute, ¿está bien y formará parte del mismo concepto de renderizado?
Baumr

Veo. Al representar el concepto, me refería a si overflow: hiddenimpone algo que difiere de lo que hace Layout?
Baumr

2
Obtenga más información hasLayouten stackoverflow.com/questions/1794350/what-is-haslayout . Creo que es sinónimo de establecer un nuevo contexto de formato de bloque. Los elementos que hacen esto son esencialmente responsables del diseño de todos sus elementos descendientes. Un resultado de esto es que los elementos que establecen un nuevo contexto de formato de bloque contienen descendientes flotantes y los flotantes fuera del elemento no interactúan con los clear: left|right|bothelementos dentro. (Esto está en la respuesta anterior.)
Chris Calo

54

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).


3
Espero que su respuesta obtenga más votos sobre esto, ya que estoy totalmente de acuerdo con usted. Nuevamente, es 2013 y realmente creo que esta es la solución que la gente debería usar.
rafaelbiten

2
Convenido. theie7countdown.com Verifique su propio análisis y esperemos que IE7 no valga la pena.
Justin

1
@Justin estuvo de acuerdo; su análisis personal lo explicará. Sin embargo, no creo que el sitio de cuenta regresiva se haya actualizado en un tiempo, lo mejor es usar las estadísticas de caniuse que ponen a IE7 en 0.39% a nivel mundial.
iono

1
Con suerte, los hacks como el clearfix pronto se volverán innecesarios mediante el uso de flexbox, en lugar de flotadores, para el diseño.
iono

Puede oponerse a admitir IE7 todo lo que desee, pero si el negocio requiere un requisito para admitir a estos usuarios (por diferentes razones, generalmente dinero), lo hará sin importar cómo se sienta sobre el tema
Kris Selbekk

27

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

8
¿Quién recuerda IE-mac ahora? ¿Por qué hacer las cosas tan complicadas debido a problemas que ya no son relevantes?
Ilya Streltsyn

23

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


3
desbordamiento: oculto no funciona en el navegador PS3. No es que la mayoría de la gente necesite que eso funcione, pero es lo más importante que explota mi sitio en PS3 al que estamos tratando de dirigirnos por razones comerciales. Ugh
gtd

1
Y es un problema si realmente desea que cierto contenido cuelgue fuera del contenedor.
Simon East

desbordamiento: oculto tiene un efecto secundario negativo del contenido recortado
Chris Calo

99
overflow:hiddentiene el efecto de recortar el contenido; tiene el efecto secundario de limpiar el contenedor ;-)
Tamlyn

desbordamiento: automático también activará un contexto de formato de bloque y no recortará el contenido.
Harry Robbins

17

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


15

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/


1
Sí, a mediados de 2011, esta es mi solución favorita. Le permite colocar objetos fuera del cuadro contenedor si es necesario (evitando overflow: hidden).
Simon East

10

Clearfix de bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

¿De qué versión de bootstrap es esta?
Eric

8

Solo uso: -

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

Funciona mejor y es compatible con IE8 + :)


No funcionará en IE7 ya que no tiene soporte para pseudoelementos CSS.
superluminary

44
... Por eso dijo "compatible con IE8 +". La mayoría de los sitios web ya no necesitan soportar IE7, su uso es inferior al 1% en todo el mundo. theie7countdown.com
Justin

8

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 ):

muestra de error de flotación 1

¿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! muestra de error de flotación 2

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

2
La razón por la cual el elemento con el clearnombre de la clase no funciona es que su atributo classes incorrecto. Lo que escribiste es classs, con un adicional s.
castaño

Su ejemplo no demuestra lo que reclama, incluso después de corregir errores.
Restablece a Monica - notmaynard el

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.


Neil, supongo que el problema surge cuando quieres un borde alrededor de ambas columnas (o un color / imagen de fondo), necesitas una sección de envoltura que necesita el truco que contiene.
Simon East el

5

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


55
overflow: hiddenCreo que quieres decir
ajbeaven

Algunos recomiendan usar la clase llamada grupo que hace las cosas más semánticas. Francamente, no estoy seguro de por qué esto no se ha dado cuenta
Damon

Estoy totalmente retrayendo esta posición. Solo uso clearfix ahora. pero en contenedores muy comunes, lo 'horneo' en el CSS para reducir la contaminación de los atributos de clase. Además, nombrarlo "grupo" parece agradable. menos caracteres para escribir también
duggi

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

4

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.


2
Eso es porque estás agregando una línea con ., solo usacontent: ""
Cuarenta

4

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

4

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

4

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.


1
Me gustaría estudiar tu forma de escribir HTML sin borrar ningún elemento. ¿Podría publicar algunos enlaces?
Starx

4

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


3

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 .


3

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

2

¿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

2

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.


2

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 .


2

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).


0

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


0

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


-2

¿Has probado esto?

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

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


2
Creo que el punto es que estamos tratando de evitar tanto el marcado adicional como los estilos en línea con esta solución. Depende del compromiso con el que seas más feliz, supongo
Sam Murray-Sutton

1
El problema con este método es que en los navegadores IE el div tiene una altura, por lo que su espacio estará desactivado. Es por eso que los métodos CSS establecen altura y tamaño de fuente.
zznq

debe decir <div style = "clear: both"> </div> con una etiqueta de cierre adecuada para que sea compatible con XHTML. He tenido problemas con jQuery cuando no hago esto
Simon_Weaver

1
Irónicamente, "se supone que está cerrado por sí mismo" <div/> es compatible con X (HT) ML, pero no es compatible con HTML , por lo que para los documentos servidos como text/htmltodos los navegadores lo tratarán como etiqueta no cerrada. Lamentablemente, no existen etiquetas de cierre automático para text/htmldocumentos, independientemente del tipo de documento .
Ilya Streltsyn

-2

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>

-2

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á.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.