Duvida no funcionamento do float e clear | HTML e CSS | Alura

Olá tudo bem?

Eu estava tentando reproduzir uma pagina de currículo pessoal com os cursos de html e css que realizar, mas fiquei com uma duvida a respeito do funcionamento do float e do cleat.

(parte "sobre mim" no CSS)

A imagem " .eu " não fica dentro do container ".principal" ele fica pra fora não respeitando aquele espaçamento azul que aparece no inspecionar elemento do navegador. No curso pelo que vi tinha funcionado o comandado respeitando o espaçamento.

A única maneira que eu encontrei de arrumar era usar um comando overflow:hiden dentro do ".principal", mas o clear float não deveria ter a mesma função? tentei de várias maneiras usando o clear e não consegui

Eu não sei se me fiz muito claro com a minha dúvida, qualquer coisa posso tentar explicar melhor.

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">

    <title>Currículo-eu</title>
</head>

<body>
    <header>

        <div class="caixa">

            <h1>Meu nome</h1>

            <nav>
                <ul>
                    <li><a href="">Sobre mim</a></li>
                    <li><a href="">Currículo</a></li>
                    <li><a href="">Entre em contato</a></li>
                </ul>
            </nav>
        </div>

    </header>
    <img class="foto" src="pexels-negative-space-169573.jpg" alt="">

    <main>

        <section class="principal">
            <h2 class="titulo-principal">Sobre Mim</h2>

            <img class="eu" src="vinicius.jpg" alt="aaa">

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s,</p>

            <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered
                alteration in some form, by injected humour</p>
            </p>

            <p>t is a long established fact that a reader will be distracted by the readable content of a page when
                looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
            </p>
        </section>

        <!-- <section class="habilidades">
            <h3 class="titulo-principal">Habilidades</h3>
            <ul class="lista-habilidades">
                <li><img src="./img/javascript-736400_640.png" alt="Simbolo javascript"></li>
                <li><img src="./img/html5-3384014_640.png" alt="Simbolo html"></li>
                <li><img src="./img/css.png" alt="Simbolo CSS"></li>
                <li><img src="./img/reactt.png" alt="Simbolo REACT"></li>
            </ul>
        </section> -->

        <!-- 
        <section class="projetos">
            <h3>Projetos Elaborados</h3>
            <div class="cards">


            </div>
        </section> -->

    </main>

    <footer>

    </footer>
</body>

</html>


header{
    background: ##959595;
    padding: 50px 0;
}

.caixa {
    position: relative; /*tira do flow do documento*/
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 0px;
    right: 0;
}

nav li{
    display: inline;
    margin:  0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: rgb(38, 38, 194);
    text-decoration: underline;
}

.foto {
    width: 100%;
    height: 900px;

}

/* sobre mim */
.titulo-principal {
    padding: 20px;
    text-align: center;
    font-size: 2em;
    margin: 1em 5em 0;
    clear: left;


}
.principal {
    padding: 4em 0;
    width: 940px;
    margin: 0 auto;

}

.principal p {
    margin: 0 0 1em;
}

.eu {
    width: 250px;
    margin: 0 20px 20px 0;
    float: left; 
}


/* Habilidades */

.habilidades {
    background: linear-gradient(#FEFEFE, #888888);
}
.habilidades img{
    max-width: 75px;
}
.lista-habilidades{
    display: flex;
    align-items: center;
    margin-left: 25%;
    margin-right: 25%;
    justify-content: space-around;
}