Sem o clear continua a mesma coisa, por quê?

no html:

<main>
        <section class="principal">
            <h2 class="titulo-principal">Sobre a nossa fisioterapia</h2>

            <img class="idosofazendofisio" src="idosofazendofisio.jpg" alt="fisioterapeuta realizando exercício com paciente idosa">

            <p>Localizada no coração da cidade a nossa <strong>fisioterapia</strong> traz para o mercado o que há de melhor para seu corpo e mente.</p>

            <p id="missao"><em>Nossa missão é:<strong>
            Proporcionar saúde e qualidade de vida aos nossos clientes com excelência e resolutividade em todos os atendimentos, fortalecendo os laços de relacionamento através da ética e confiança em nossos serviços</strong>.</em></p>

            <p>Oferecemos atendimento com padrão de excelência, volatilidade e agilidade, garantindo qualidade e saisfação de nossos clientes. </p>
        </section>

        <section class="beneficios">
            <h3 class="titulo-principal">Benefícios</h3>

            <ul>
                <li class="itens">Atendimento aos clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
            </ul>
        </section>
    </main>

no css:
.banner {
width: 100%;
/*no css faço comentário com / e * e o navegador ignora*/

}

.titulo-principal {
text-align: center;
font-size: 2em; /*dobro da fonte padrão*/
margin: 0 0 1em; /* uma linha para baico*/ 
clear: left;
}

.principal p {
margin: 0 0 1em; /*o tamanho da fonte um espaço para baixo*/
}

.principal strong {
font-weight: bold;
}

.principal em {
font-style: italic;   
}

.idosofazendofisio {
width: 170px;
float: left;
}

sem o clear ele já está como deveria estar, existe algum erro?