¿Cuál es la mejor manera de borrar el estilo de CSS “flotante”?

Estoy bastante acostumbrado a limpiar mis carrozas usando
pero las cosas cambian constantemente y no estoy seguro de si esta es la mejor práctica.

Hay un hack CSS (de positioneverything) disponible que le permite obtener el mismo resultado sin el div de compensación. Pero … afirman que el truco está un poco desactualizado y en su lugar tal vez deberías mirar este truco . Pero … después de leer 700 páginas de comentarios 🙂 parece que puede haber algunos lugares donde el último hack no funciona.

Me gustaría evitar cualquier javascript javascript porque me gustaría que mi clearing funcione independientemente de javascript habilitado.

¿Cuál es la mejor práctica actual para borrar divs de una manera independiente del navegador?

Actualización : en 2014, debe usar una técnica de liberación de archivos que utiliza pseudo-elementos, como el mencionado por @RodrigoManguinho. Esta es la forma moderna de limpiar carrozas. Para un método aún más actualizado, vea el micro clearfix de Nicholas Gallagher:

 /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } 

Respuesta Original:

Realmente no me gusta usar marcado extra semántico, así que me alejo de usar un elemento de limpieza. En lugar de solo aplicar overflow: hidden; al padre de los flotadores para limpiarlos. Funciona con navegador cruzado, no hay problema. Creo overflow: auto; también funciona

Obviamente, no funcionará si desea utilizar una propiedad de desbordamiento diferente, pero debido al error del cuadro de expansión IE6, rara vez tengo una razón para desbordar deliberadamente mis contenedores.

Consulte más información sobre el uso del overflow lugar de clear para evitar agregar marcado adicional .

Lo he encontrado con mayor frecuencia (incluido yo mismo), este método se usa en html:

 

Con esto en la hoja de estilo:

 .clear {clear: both;} 
 .clear-fix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear-fix { zoom: 1; } 
Some Div With Float
Another Div With Float

En mi opinión, esta es la mejor manera. No necesita elementos DOM adicionales ni un uso incorrecto del desbordamiento ni de ningún corte.

hay un poco de vudú que tiendo a usar.

  
 span.clear { display: block; clear: both; width: 1px; height: 0.001%; font-size: 0px; line-height: 0px; } 

Esta combinación arregla mágicamente toda una serie de problemas del navegador, y acabo de usarlo durante tanto tiempo que he olvidado qué problemas resuelve.

La mejor manera es poner “overflow: auto;” en contenedor div. Está más limpio.

 div.container {overflow: auto;} 

más detalles en: http://www.quirksmode.org/css/clearing.html

Simplemente agregando overflow:auto; para el elemento padre que contiene los elementos flotantes es una solución excelente en la mayoría de los casos.

MUESTRA HTML:

 
...
...

CSS:

 .child { float: right; word-wrap: break-word; } .child img { max-width: 100%; height: auto; /* of course, this is default */ } .child p { word-wrap: break-word; } .container { overflow: auto; } 

Como con cualquier otro método, hay algunos problemas con el overflow:auto; también. Para solucionarlos, aplique max-width:100%; height: auto; max-width:100%; height: auto; para imágenes, y word-wrap: break-word; para el texto contenido dentro de los elementos flotantes.

[ fuente ]

jQuery UI tiene algunas clases para arreglar esto también ( ui-help-clearfix hace algo).

Técnicamente

es mejor que

porque un div vacío tendrá 0 altura, por lo tanto, simplemente borrando los flotadores.
dejará un espacio. No veo nada de malo con el uso del método

.

 .floatWrapper { overflow:hidden; width:100%; height:100%; } .floatLeft { float:left; } 
Hello World!
Whazzzup!

El problema es que los elementos principales no se ajustan a la altura de sus elementos secundarios flotantes. El mejor método que he encontrado es hacer float al elemento primario para forzarlo a ajustarse con las alturas de sus elementos secundarios flotantes, luego aplicar su CSS clear al siguiente elemento que realmente desea eliminar. A menudo es necesario agregar width:100% también, ya que sin flotar el padre puede cambiar inesperadamente su diseño.

Como han mencionado otros, es semánticamente mejor evitar el marcado que no está relacionado con su contenido, como un
o

con una clase de clearfix.

 
something else

este br no dejará un espacio.

 

funciona bien también El beneficio de esto sobre el uso de class = “clear” es que simplemente funciona y no tiene que configurar reglas adicionales en su CSS para hacerlo.

Sin embargo, otro es el “Flotador casi todo” por el cual se flota al padre del mismo lado que el niño flotado.

Prefiero usar con .clear {clear: both; } sobre .clear-fix: después de blah blah, porque cuando miras el marcado está más claro lo que está sucediendo. Solo para tu información, este es mi tutorial sobre cómo usar float y clear que escribí hace un tiempo.