example div css clearfix

css - div - w3 clearfix



ClearFix vs Overflow (1)

Esta pregunta ya tiene una respuesta aquí:

Es el problema estándar de flotación. Usted tiene un grupo de elementos flotantes dentro de un contenedor padre div. Como los hijos están flotando, el padre no se expande para incluirlos a todos.

Conozco la solución de clearfix y también establezco la propiedad de desbordamiento en el div principal del contenedor como "auto" u "hidden". http://www.quirksmode.org/css/clearing.html Para mí, establecer el método de desbordamiento parece mucho más agradable ya que es solo una propiedad. Lo que quiero entender es cuándo el método de compensación tiene una ventaja sobre este método porque lo veo muy a menudo.

PD: no me preocupa IE6.


La única vez que debe molestarse en usar el método "clearfix" que inserta contenido invisible para borrar es si necesita que un elemento esté visible cuando se desborda el elemento al que lo está aplicando; de lo contrario, desencadenar el desbordamiento de HaLayout + es oro.

Tenga en cuenta que en IE7 desbordamiento de disparadores ocultos hasLayout. No estoy seguro acerca de IE8.

#wrapper { width:80em; overflow:hidden; }

El método anterior funcionará bien en la mayoría de los casos, a menos que sea necesario, por ejemplo, #header para desbordar pasado #wrapper ..

#wrapper { width:80em; position:relative; } #wrapper:after { content:"."; clear:both; display:block; height:0; visibility:hidden; } #header { position:absolute; top:-15px; left:-15px; }