Principais diferenças entre as propriedades de posicionamento CSS
Sou desenvolvedor front-end a muito tempo e sempre que me perguntam para que serve cada uma das propriedades de posicionamento, eu dou uma travada e não sei responder com certeza, apenas sei como se comportam na prática.
Tendo isso como base, resolvi esclarecer de uma forma simples o que cada uma faz. Assim você também vai entender e escolher qual a melhor a ser usada ou entender o comportamento padrão de alguns elementos que tem essas propriedades. Vamos lá.
O display: inline
permite que os elementos se posicionem um do lado do outro, a limitação do display: inline é que os elementos não aceitam modificações tanto a width quanto a height.
O display: inline-block
permite que os elementos se posicionem um do lado do outro. O display: inline-block aceitam modificações em sua width e height. Por esse motivo o display: inline-block é muito mais interessante na maioria dos casos do que o display: inline. Uma dificuldade do display: inline-block é fazer espaçamento dos elementos entre si, é preciso colocar margins e fazer alguns cálculos.
float: left | right
Embora tenha sido o meu preferido durante anos e até hoje ainda uso bastante para resolver coisas rápidas, o float é mais complicado, ele empurra o elemento para um dos lados (left | right) e os elementos que estão embaixo sobem. O float não permite usar a propriedade vertical-align: middle para alinhar os elementos verticalmente. Então, para usar o float você tem que está sempre calculando as distâncias para que tudo ocorra da forma planejada.
O display: flex
veio para salvar nossa vida e facilitar o posicionamento de elementos. Ele permite que você ajuste o posicionamento, espaçamento e alinhamento dos elementos de forma intuitiva e sem fazer muitos cálculos. O display flex é um pouco mais complicado de usar no inicio pois existem muitas propriedades mas que são justamente para melhorar nosso código e facilitar nossa vida.
Com tudo, concluo que você deve aprender, usar e abusar do display flex pois ele facilita nossa vida 🙂
Espero que tenha ajudado a você entender um pouco sobre essas propriedades. Até mais.