.menu-principal li { float: left; }

Minha dúvida é, pq o layout não quebra depois de utilizar float?

eu na grande maioria dos meus códigos, eu sempre uso o clear:both; pois sempre quebra o layout se eu não usa-lo.

Minha dúvida é, pq não quebrou o layout quando foi utilizado float left?

<div class="container">

            <h1 class="logo">
                <img src="img/logo.png" alt="Notícias.com">
            </h1>

            <nav class="barra-nav">
                <ul class="menu-principal">
                    <li><a href="noticias.html" class="noticias">Notícias</a>
                    <li><a href="esportes.html" class="esportes">Esportes</a>
                    <li><a href="famosos.html" class="famosos">Famosos</a>
                </ul>

                <form class="busca">
                    <input type="search" id="campo-busca">
                    <button type="submit">Buscar</button>
                </form>
            </nav>
        </div>

.logo,
.barra-nav,
.menu-principal,
.busca{
    display: inline-block;
    vertical-align: middle;
}
.menu-principal li{
    float: left;
}