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


127

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?


@Moak Esa pregunta en particular se trata inline, no inline-block. Pero el primero en relación es bueno: stackoverflow.com/a/11823622/918414
ThinkingStiff


2
Ejemplo de enlace está muerto
information_interchange

Respuestas:


156

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


44
"clearfix" es solo un nombre; la "corrección" indica la fijación de expectativas incorrectas y / o la implementación incorrecta del navegador. Estoy (felizmente) de acuerdo en que existen alternativas a la flotación / limpieza, pero no hay nada inherentemente roto o arreglado al respecto.
Tim Medora

10
@Alex - ¿Existe una forma no hacky, compatible con varios navegadores para eliminar el espacio en blanco entre los elementos de bloque en línea que están en líneas separadas? Me gustaría poder dejar de usar flotadores, pero los mejores enlaces que pude encontrar sobre este problema ( aquí y aquí ) no son satisfactorios. Mencionas la white-spacepropiedad, ¿podrías explicar esto?
antinome

3
@Alex: gracias, eso es muy bueno, pero todavía encuentro el enfoque float-with-modern-clearfix un poco más fácil de mantener, porque no se romperá si algún día lo personalizo letter-spacingen otro lugar de mi CSS.
antinome

1
¿Por qué el bootstrap todavía está usando flotante para su sistema de cuadrícula? ¿No son esos diseños?
AzDesign

2
Tenga en cuenta que el bloqueo en línea agrega espacios en blanco alrededor de los elementos. Si lo está utilizando para una cuadrícula, o no desea este espacio en blanco, deberá agregar hacks de estilo / HTML adicionales para tener en cuenta esto. Ver: css-tricks.com/fighting-the-space-between-inline-block-elements/…
kretzm

23

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:


¿hay alguna solución alternativa para el espacio sin espacios en blanco, tal vez div+(whitespace) {display:none}o algo así?
NoBugs

1
Vea el tercer párrafo después de su primera oración ... Particularmente vea la pregunta vinculada
user56reinstatemonica8

@NoBugs simplemente aplica el tamaño de fuente: 0; al elemento que lo contiene, ¡solo ten cuidado si no tienes tamaños de fuente específicos establecidos en los elementos dentro de los bloques en línea!
Jai

@Jai Exactamente, y dado que el estilo / vista debe ser disjunto del proceso de creación de html / model, esa es una mala práctica. (¿Qué pasa si usa un servicio que le dio <div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
NoBugs

4

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


66
Sí, eso es porque debes evitar usar espacios entre elementos porque los bloques en línea tienen en cuenta los espacios de la misma manera que los elementos en línea. Mantenga las etiquetas de bloque en línea ajustadas entre sí y sin problemas con los píxeles.
Ben Sinclair

También esto puede ser una diferencia en el navegador con el relleno / margen predeterminado en los elementos. Bueno, al menos en el pasado siempre lo he hecho, * {padding:0px; margin:0px; }ya que esto ayuda a equilibrar mi codificación
enojado 84

¿Es esta la razón por la que Bootstrap (tal vez otros) lo usan en lugar del bloqueo en línea, me pregunto?
NoBugs

1

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


1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.