css - significa - ventajas y desventajas de html

Ventajas de usar pantalla: bloque en línea vs flotador: izquierda en CSS

Question

Normalmente, cuando queremos tener múltiples DIVs en una fila usamos float: left , pero ahora descubrí el truco de display:inline-block

Ejemplo de enlace here . Me parece que display:inline-block es una mejor manera de align DIVs en una fila, pero ¿hay algún inconveniente? ¿Por qué es este enfoque menos popular que el truco float ?

Answer 1

En 3 palabras: inline-block es mejor.

Bloque en línea

El único inconveniente de la display: inline-block enfoque de display: inline-block es que en IE7 y abajo un elemento solo se puede mostrar en inline-block si ya estaba en inline por defecto. Lo que esto significa es que en lugar de usar un elemento <div> tienes que usar un elemento <span> . Realmente no es un gran inconveniente porque semánticamente un <div> es para dividir la página, mientras que un <span> es solo para cubrir un lapso de una página, por lo que no hay una gran diferencia semántica. Una gran ventaja de la display:inline-block es que cuando otros desarrolladores mantienen su código en un momento posterior, es mucho más obvio qué display:inline-block y text-align:right está tratando de lograr que una float:left o float:right declaración float:right . Mi ventaja favorita del enfoque de inline-block es que es fácil usar vertical-align: middle , line-height y text-align: center para centrar perfectamente los elementos, de una manera intuitiva. Encontré una excelente publicación de blog sobre cómo implementar cross-browser en línea-bloque, en el blog de Mozilla . Aquí está la compatibilidad del navegador .

Flotador

La razón por la que usar el método float no es adecuado para el diseño de su página es porque la propiedad CSS float fue originalmente diseñada para envolver texto alrededor de una imagen (estilo revista) y, por diseño, no es la más adecuada para propósitos generales de diseño de página . Al cambiar elementos flotados más tarde, a veces tendrá problemas de posicionamiento porque no están en el flujo de la página . Otra desventaja es que generalmente requiere una corrección de lo contrario, puede romper aspectos de la página. El clearfix requiere agregar un elemento después de los elementos flotados para evitar que sus padres colapsen a su alrededor, lo que cruza la línea semántica entre separar el 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 corregirse fácilmente con la propiedad CSS de white-space .

Editar:

SitePoint es una fuente muy confiable de asesoramiento sobre diseño web y parece tener la misma opinión que yo:

Si es nuevo en el diseño de CSS, se le perdonará pensar que el uso de CSS flota de forma imaginativa es el colmo de la habilidad. Si ha consumido tantos tutoriales de diseño de CSS como puede encontrar, puede suponer que dominar flotadores es un rito de iniciación. Quedarás deslumbrado por el ingenio, asombrado por la complejidad, y obtendrás un sentido de logro cuando finalmente entiendas cómo funcionan las carrozas.

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 se está deshaciendo de los flotadores de las filas y de completar Flexbox.

Petición de extracción # 21389

Answer 2

Hay una característica sobre el bloque en línea que puede no ser directa. Es decir que el valor predeterminado para vertical-align en CSS es la línea 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 float: left, los divs son independientes el uno del otro y puedes alinearlos usando el margen fácilmente.

Answer 3

Puede encontrar la respuesta en profundidad here .

Pero, en general, con float debe tener en cuenta y cuidar los elementos circundantes y inline-block en línea la forma más simple de alinear elementos.

Gracias

Answer 4

Si bien estoy de acuerdo en que, en general inline-block en inline-block es mejor, hay algo más que se debe tener en cuenta si usa anchos de porcentaje para crear una cuadrícula sensible (o si desea anchuras perfectas para píxeles):

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

Con flotadores, 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 el espacio en blanco HTML sin hacer que el código sea feo .

Si por algún motivo no puede controlar el marcado HTML (por ejemplo, un CMS restrictivo), puede probar los trucos que se describen aquí, o puede que necesite comprometer y usar flotantes en lugar de inline-block. También hay feos trucos de CSS que solo deberían usarse en circunstancias extremas, como font-size:0; en el contenedor de la columna, vuelva a aplicar el tamaño de la fuente dentro de cada columna .

Por ejemplo:

• Aquí hay una cuadrícula de 3 columnas de 33.3% de ancho con float: left . Simplemente "funciona" (pero para el contenedor que necesita ser borrado).
• Aquí está la misma cuadrícula exacta, con inline-block . El espacio en blanco entre 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 descienda una línea.
• Aquí está la misma cuadrícula, con inline-block y sin espacios en blanco entre columnas en el HTML . "Simplemente funciona" de nuevo, pero el HTML es más feo y tu CMS podría forzar algún tipo de embellecimiento o sangría a su salida HTML, haciendo esto difícil de lograr en la realidad.

Answer 5

Si desea alinear div con una precisión de píxel, utilice float. inline-block parece que siempre requiere cortar algunos píxeles (al menos en IE)