Ventajas de usar display: inline-block vs float: left en CSS

Normalmente, cuando queremos tener múltiples DIVsen una fila, usaríamos float: left, pero ahora descubrí el truco dedisplay:inline-block

Enlace de ejemplo aquí . Me parece que display:inline-blockes una mejor manera de hacerlo align DIVsen una fila, pero ¿hay algún inconveniente? ¿Por qué este enfoque es menos popular que el floattruco?

En 3 palabras: inline-blockes mejor.

Bloque en línea

El único inconveniente del display: inline-blockenfoque es que en IE7 y debajo de un elemento solo se puede mostrar inline-blocksi ya estaba inlinepor defecto. Lo que esto significa es que, en lugar de usar un <div>elemento, debe usar un <span>elemento. No es realmente un gran inconveniente en absoluto porque semánticamente <div>es para dividir la página, mientras que a <span>es solo para cubrir un lapso de una página, por lo que no hay una gran diferencia semántica. Una gran ventaja display:inline-blockes que cuando otros desarrolladores mantienen su código en un momento posterior, es mucho más obvio qué display:inline-blocky text-align:right está tratando de lograr que una float:lefto una float:rightdeclaración. Mi favorita beneficio del inline-blockenfoque es que es fácil de usar vertical-align: middle, line-heightytext-align: centerpara centrar perfectamente los elementos, de una manera intuitiva. Encontré una gran publicación de blog sobre cómo implementar el bloqueo en línea entre navegadores, en el blog de Mozilla . Aquí está la compatibilidad del navegador .

Flotador

La razón por la que el uso del floatmétodo no es adecuado para el diseño de su página es porque la floatpropiedad CSS originalmente estaba destinada a tener texto ajustado alrededor de una imagen (estilo de revista) y, por diseño, no es el más adecuado para propósitos generales de diseño de página. Al cambiar los elementos flotantes más adelante, a veces tendrá problemas de posicionamiento porque no están en el flujo de la página . Otra desventaja es que generalmente requiere una solución clara; de lo contrario, puede romper aspectos de la página. El clearfix requiere agregar un elemento después de los elementos flotantes para evitar que su padre se derrumbe a su alrededor, lo que cruza la línea semántica entre la separación del estilo del contenido y, por lo tanto, es un antipatrón en el desarrollo web .

Cualquier problema de espacio en blanco mencionado en el enlace anterior podría solucionarse fácilmente con la white-spacepropiedad CSS.

Editar:

SitePoint es una fuente muy creíble para consejos de diseño web y parecen tener la misma opinión que yo:

Si eres nuevo en los diseños de CSS, se te perdonaría pensar que usar flotadores de CSS de formas imaginativas es el colmo de la habilidad. Si ha consumido tantos tutoriales de diseño CSS como pueda encontrar, puede suponer que dominar los flotantes es un rito de iniciación. Te sorprenderá el ingenio, asombrado por la complejidad, y obtendrás una sensación de logro cuando finalmente entiendas cómo funcionan los flotadores.

No te dejes engañar. Te están lavando el cerebro.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Actualización de 2015: Flexbox es una buena alternativa para los navegadores modernos :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Más información

21 de diciembre de 2016 Actualización

Bootstrap 4 está eliminando el soporte para IE9 y, por lo tanto, está eliminando los flotadores de las filas y completando Flexbox.

Solicitud de extracción # 21389

Si bien estoy de acuerdo en que en general inline-blockes mejor, hay una cosa adicional a tener en cuenta si está utilizando anchos porcentuales para crear una cuadrícula receptiva (o si desea anchos perfectos en píxeles):

Si está utilizando inline-blockcuadrículas con un ancho total del 100% o cercano al 100%, debe asegurarse de que su marcado HTML no contenga espacios en blanco entre las columnas .

Con los flotantes, esto no es algo de lo que deba preocuparse: las columnas flotan sobre cualquier espacio en blanco u otro contenido entre columnas. Las respuestas de esta pregunta tienen algunos buenos consejos sobre cómo eliminar espacios en blanco HTML sin hacer que su código sea feo .

Si por alguna razón no puede controlar el marcado HTML (por ejemplo, un CMS restrictivo), puede probar los trucos descritos aquí, o puede necesitar comprometer y usar flotantes en lugar de bloque en línea. También hay trucos feos de CSS que solo deben usarse en circunstancias extremas, como font-size:0;en el contenedor de la columna y luego volver a aplicar el tamaño de fuente dentro de cada columna .

Por ejemplo:

• Aquí hay una cuadrícula de 3 columnas de 33.3% de ancho confloat: left . "Simplemente funciona" (pero para el contenedor que necesita ser borrado).
• Aquí está exactamente la misma cuadrícula, coninline-block . El espacio en blanco entre los bloques crea un espacio de ancho fijo que empuja el ancho total más allá del 100%, rompiendo el diseño y haciendo que la última columna caiga una línea.
• Aquí está la misma cuadrícula, con inline-blocky sin espacios en blanco entre las columnas en el HTML . "Simplemente funciona" nuevamente, pero el HTML es más feo y su CMS podría forzar algún tipo de prettificación o sangría a su salida HTML, lo que hace que esto sea difícil de lograr en la realidad.

Si desea alinear divcon píxeles precisos, utilice flotante. inline-blockparece que siempre requiere que corte unos pocos píxeles (al menos en IE)

Puede encontrar la respuesta en profundidad aquí .

Pero, en general float, debe ser consciente y cuidar los elementos circundantes y la inline-blockforma simple de alinear los elementos.

Gracias

Sin embargo, hay una característica sobre el bloqueo en línea que puede no ser directa. Es decir, el valor predeterminado para la alineación vertical en CSS es la línea de base. Esto puede causar un comportamiento de alineación inesperado. Mira este artículo.

http://www.brunildo.org/test/inline-block.html

En cambio, cuando haces un flotante: izquierda, los divs son independientes entre sí y puedes alinearlos usando el margen fácilmente.