¿Cuál es la forma adecuada y estándar para manejar floats CSS?

Question

Siempre he pensado que la forma correcta de manejar floats de CSS era usar un div claro,: después de pseudo clase o overflow: auto en el padre. Según entiendo, claro es diseñado para borrar flotadores y expandir el elemento principal a la normalidad. Ese es su propósito, ¿sí?

Hoy he oído hablar de un método alternativo para manejar el flotante (y el colapso de los padres): también flota el elemento principal para expandirlo alrededor del elemento secundario flotante.

¿Cómo se alinea esto con los estándares web? ¿Hay incluso un estándar oficial flotante/claro?

Answer 1

Como @edeverett Dicho esto, no existe una norma particular.

Los principiantes reales utilizan el posicionamiento absoluto y entran en el modo de pesadilla, ya que hay muchas limitaciones y cosas que preocuparse.

Los principiantes tienden a flotar todo dentro del contenido y luego buscan donde está el fondo del padre, aunque sin contenido en el flujo el padre ya no puede tener un fondo visible ...
tuve momentos difíciles con IE6 y la última columna (demasiado grande para el diseño del conjunto) pasando por debajo de los otros (debido ya sea a doble margen de error de flotador o un ancho de 100% + de relleno/margen en un niño)

Entonces aprendes muchas técnicas diferentes, cada una con su fuerza, limitaciones y problemas.

Luego se aprende por experiencia cuando usa cada una de ellas. Incluso posicionamiento absoluto en casos raros; incluso tablas de distribución en casos desesperados. Son malos, pero un diseño con 25 divs esperando estallar tan pronto como agregue 1px en algún lugar es peor.
Una regla de oro es cuanto menos se elimina el contenido del flujo, menos problemas tiene. Y siempre hay muchas formas de hacer lo mismo en CSS.

Mi favorito es el versátil display: inline-block;
Ahora que 3.x Fx ha reemplazado Fx 2.0 (3.0 está incluso desapareciendo), que está apoyado por todos los navegadores (display: inline; + + zoom: 1; comentarios condicionales para IE < 8).
Dos pequeñas molestias que se me ocurren:

• Whitespace necesita un truco como un </div><!-- comment --><div> entre dos div consecutiva para evitar que
• vertical-align: top; a menudo se requiere y es difícil de detectar cuando se empieza a usarlo

En formularios con una etiqueta + entrada por línea, hace maravillas, en comparación con los flotadores. Lo mismo en encabezados o pies de página.

Answer 2

No hay un estándar particular aquí. Usa lo que funcione en la situación.

Agregar elementos HTML adicionales solo para borrar el flotador está mal visto, pero a veces puede ser útil.

Personalmente prefiero usar el estilo Float Nearly Everything de flotar el elemento principal, pero no se adapta a todas las situaciones.

Answer 3

Cuando aprendí CSS por primera vez, utilicé el método flotante principal-secundario (historia graciosa, en realidad solo utilicé flotantes + ancho (ahora que he leído que no es tan gracioso)) pero ahora siento que simplemente está sucio . Quiero decir, ¿dónde parar? ¿Simplemente flotas todo el infierno?

Esto funcionaría, por supuesto, pero he encontrado que la solución más elegante es aplicar flotadores donde sea necesario (para alinear los elementos bien buenos) y limpiarlos adecuadamente. Demonios en estos días incluso arrojo un poco de posición: absoluta y posición: relativa a la mezcla.

Clear está hecho con el propósito de eliminar flotadores, y no estoy seguro de que sea útil más allá de eso.

Por supuesto, CSS es una lección para aprender correctamente así que tal vez todo lo que acabo de escribir es pura conjetura y no deberías escuchar ninguna de mis agitaciones.

Answer 4

Todos estos métodos de tipo hacks: los flotadores nunca fueron realmente diseñados para los tipos de diseños para los que los utilizamos. Estaban destinados a controlar el flujo de texto alrededor de cosas como imágenes. Como resultado, como dice edeverett, no hay una sola forma aprobada de abordarlo: ¡use lo que sea que funcione en su circunstancia!

Personalmente prefiero el desbordamiento: método oculto debido a su simplicidad. Nunca he tenido problemas con eso.

¡Trae css3 y multi-columns!

http://www.css3.info/preview/multi-column-layout/