Uso: después de borrar elementos flotantes

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

Http://jsfiddle.net/8unU8 /

Pensé, que puedo eliminar el <div class="clear"> mediante el uso de pseudo selectores como :después.

Pero el ejemplo no funciona:

Http://jsfiddle.net/EyNnk /

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

 101
csshtml
Author: Benjamin, 2012-05-22
Source

5 answers

Escribe así: 

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

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

 246
Author: sandeep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-28 00:34:03

No, no es suficiente 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%;
}
 6
Author: kernelpanic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-22 09:36:07

Esto también funcionará: 

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

.clearfix:after {
    clear: both;
}

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

Da la clase clearfixal elemento padre, por ejemplo tu elemento ul.

Fuentes aquí y aquí.

 4
Author: Mahdi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-20 07:27:52

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

Http://jsfiddle.net/EyNnk/2 /

 0
Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-22 09:35:16

Use 

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

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

 0
Author: sachin kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-02 13:08:47