Hola! Explicare un poco el funcionamiento de Clear

Bien, para empezar, usare lo visto es clase, lo primero que hicimos fue agregar el float: ; a nuestra imagen utensilios con la propiedad de left, esto le da un lugar en la pagina, su traduccion seria "hacer la imagen flotante y posicionarla en la izquierda del bloque"

.utensilios{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

Luego agregamos clear: left; a nuestro .titulo-principal, clear hace que otro float no pueda ser adyacente en el mismo bloque, y la propiedad de left indicaria donde esta el objeto flotante, si no se aplica de esta manera y pondriamos right sabiendo que el float es left no tendria ningun efecto

.titulo-principal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

dato importante, en nuestro html tenemos esto:

<main>
            <section class="principal">
                <h2 class="titulo-principal">Sobre la Barbería Alura</h2>

                <img class="utensilios" src="imagenes/utensilios.jpg" alt="Utensilios de un barbero.">

                <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente.</p>

                <p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong>.</em></p>

                <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p>
            </section>

            <section class="diferenciales">

                <h3 class="titulo-principal">Diferenciales</h3>

                <ul class="ulitems">
                    <li class="items">Atencion personalizada a los clientes</li>
                    <li class="items">Espacio diferenciado</li>
                    <li class="items">Localización</li>
                    <li class="items">Profecionales calificados</li>
                </ul>

                <img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">

            </section>

        </main>

el bloque seria entre < section class="principal"> y el cierre de esa section < /section>, a eso se le denomida el bloque, por esto mismo lo rodea la descripcion y no los diferenciales

Muchas gracias, espero halla servido :3