Porque no caso dos itens do menu foi usado
.menu-principal li {float: left;}
e não
.menu-principal li {inline-block} ?
Parece dar na mesma.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Porque no caso dos itens do menu foi usado
.menu-principal li {float: left;}
e não
.menu-principal li {inline-block} ?
Parece dar na mesma.
Oi, Sergio, tudo bem?
Algumas propriedades em determinadas aplicações terão o mesmo efeito, mas não na teoria e em outras práticas não terá.
O inline-block é um valor atribuído à propriedade display que especifica o tipo de caixa que será estilizado, podendo ser: flex, grid, inline, inline-block, none, e várias outras. Ou seja, quando definimos um display: inline-block ´para um determinado elemento, como por exemplo, um menu, estamos dizendo que queremos que o elemento esteja em bloco e os links numa única linha.
A propriedade `float diz se o elemento que recebe o seu valor sairá do fluxo padrão e irá flutuar direto ou esquerdo do container. Geralmente, muito usado para posicionar texto ao redor de imagens.
No caso do código, teve o mesmo efeito, pois o float: left fez os itens do menu flutuarem a esquerda do elemento. Mas particularmente, prefiro o inline-block por ser mais descritivo e por ter menos efeitos colaterais.
Para saber mais de ambas as propriedades:
Qualquer dúvida é só falar!