Usando: después para borrar elementos flotantes

106

Tengo una lista y los li tienen un float:left;. El contenido después del <ul>debe estar alineado correctamente. Por lo tanto, puedo construir lo siguiente:

http://jsfiddle.net/8unU8/

Pensé que puedo eliminar el <div class="clear">usando pseudo selectores como: after.

Pero el ejemplo no funciona:

http://jsfiddle.net/EyNnk/

¿Siempre tengo que crear un div separado para borrar los elementos flotantes?

html css

— Torben
fuente

261

Escribe así:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Compruebe esto http://jsfiddle.net/EyNnk/1/

— sandeep
fuente

Asi es como se hace. pero tenga en cuenta el punto en mi respuesta sobre semántica.

— Alex

2

Solo una información menor: ::aftercon dos puntos dobles es la forma recomendada de apuntar a pseudoelementos.

— Dennis98

11

Todos los navegadores que admiten la sintaxis de dos puntos dobles (: :) CSS3 también admiten solo la sintaxis (:), pero IE 8 solo admite dos puntos simples, por lo que, por ahora, se recomienda usar dos puntos simples para obtener la mejor compatibilidad con el navegador. :: es el formato más nuevo con sangría para distinguir el pseudo contenido de los pseudo selectores. Si no necesita compatibilidad con IE 8, no dude en utilizar dos puntos. css-tricks.com/almanac/selectors/a/after-and-before

— retroriff

por qué deberíamos poner esto: "content: ''; display: block;" ? y ¿qué pasa si quieres un contenedor en línea?

— Lucke

6

No, no es suficiente con hacer algo como esto:

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

Y el siguiente CSS:

ul li {float: left;}


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

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

— panico kernel
fuente

5

Esto también funcionará:

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

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

Dale la clase clearfixal elemento padre , por ejemplo tuul elemento.

Fuentes aquí y aquí .

— Mahdi
fuente

1

pantalla: la mesa puede agregar espacio adicional; En su lugar, uso display: block

— The Cog

0

El texto 'dasda' nunca estará dentro de una etiqueta, ¿verdad? Semánticamente y para que sea HTML válido, simplemente agregue la clase clara a eso:

http://jsfiddle.net/EyNnk/2/

— Alex
fuente

1

No es semántica en absoluto. 1) Siempre borramos el elemento principal si su hijo flota en él, por ejemplo, según su respuesta, si quiero dar antecedentes al UL, no cubre los LI porque UL no está claro & 2) Tengo una pregunta por qué lo aclaras. Clase en un DIV separado antes de P. si solo le das a P, también es trabajo

— sandeep

0

Utilizar

.wrapper:after {
    content : '\n';
}

Muy similar a la solución proporcionada por Roko. Permite insertar / cambiar contenido usando: after y: before psuedo. Para obtener más información, consulte http://www.quirksmode.org/css/content.html

— sachin kumar
fuente