Tabla de contenido
Display : Define el tipo de visualización de un elemento.
Antes de entender el funcionamiento de la propiedad display y su elemento inline-block:
display: inline-block;
Se debe conocer y entender la diferencia entre los elementos block e inline:
Como se observo en la clase existe relación entre:
Tomando como ejemplo a display : inline-grid se debe considerar que en este caso, grid es el comportamiento interno del contenedor, mientras que inline es el comportamiento externo del contenedor ante todo el HTML. Lo mismo pasa con inline-flex y también con grid y flex (que en realidad son block-grid y block-flex).
BFC: Block Formatting Context. Es un mini layout dentro de otro layout. O sea es el layout interno de un elemento, que se comporta de manera independiente a como se comporta a su layout contenedor. Un BFC puede utilizar position: absolute o fixed. En el caso de display: inline-block, table-cell o table-caption.
https://codepen.io/kevinjlope/pen/abBxpaO
Como se observa la clase caja-flotante, de la ilustración embebida de codepen, tiene la propiedad float, que lo convierte en una caja flotante, que se puede posicionar mas a la izquierda o a la derecha, de su posición inicial. Se puede posicionar a la izquierda o a la derecha por los valores que puede recibir righ o left. En caso que no se le haya agregado esta propiedad, las cajas se posicionaran una de bajo de otra, ya que son etiquetas div, y por defecto estas vienen con la propiedad display: block, como se observa en la siguiente imagen.