Usando: después de borrar elementos flotantes

Tengo una lista y los li's tienen un float:left;. El contenido después del <ul> debe alinearse correctamente. Por lo tanto i puedo construir la siguiente:Usando: después de borrar elementos flotantes

http://jsfiddle.net/8unU8/

pensé, que puedo quitar el <div class="clear"> mediante el uso de seudo selectores como: después.

Pero el ejemplo no está funcionando:

http://jsfiddle.net/EyNnk/

qué siempre tiene que crear un div por separado para borrar elementos flotantes?

Fuente

2012-05-22 Torben

231

escribe así:

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

Marque esta http://jsfiddle.net/EyNnk/1/

Fuente

2012-05-22 09:33:29 sandeep

Así es como hacerlo. pero tenga en cuenta el punto en mi respuesta sobre semántica. – Alex

Solo una información menor: ':: after' con dos puntos es la forma recomendada de orientar los pseudo-elementos. – Dennis98

Cada navegador que admite la sintaxis de dos puntos dobles (: :) CSS3 también admite solo la sintaxis (:), pero IE 8 solo admite el punto y coma, por lo que, por ahora, se recomienda utilizar solo un punto para obtener la mejor compatibilidad con el navegador . :: es el formato más nuevo indentado para distinguir el pseudocontenido de los pseudo selectores. Si no necesita soporte para IE 8, puede usar el doble punto. https://css-tricks.com/almanac/selectors/a/after-and-before/ – retroriff

El texto 'dasda' nunca no será dentro de una etiqueta, ¿verdad? Semántica y ser HTML válido como ser, sólo tiene que añadir la clase clara a esa:

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

Fuente

2012-05-22 09:35:16 Alex

No es semántica en absoluto. 1) Siempre borramos el elemento padre si su hijo ha flotado sobre él, por ejemplo, según su respuesta. Si quiero dar un trasfondo a la UL, no cubre los LI porque UL no está claro y 2) Tengo una pregunta ¿Por qué dar claro? Clasifique en un DIV por separado antes de P.si le das a P solo también es trabajo – sandeep

No, no es suficiente para 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%; 
}

Fuente

2012-05-22 09:36:07 kernelpanic

uso

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

Mucho como solución proporcionada por Roko. Permite insertar/cambiar contenido usando: after y: before psuedo. Para más detalles comprobar http://www.quirksmode.org/css/content.html

Fuente

2012-05-22 09:49:24

Esto funciona así:

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

.clearfix:after { 
    clear: both; 
} 

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

dar a la clase clearfix al elemento padres, por ejemplo, su elemento ul.

Fuentes here y here.

Fuente

2014-01-20 07:27:52 Mahdi

pantalla: la tabla puede agregar espaciado adicional; Yo uso pantalla: bloquear en su lugar –

Usando: después de borrar elementos flotantes

Respuesta

Cuestiones relacionadas