Neste ponto do curso quis começar a brincar mais com o CSS da minha home, e pensei em colocar o texto da missão dentro de um box colorido. O texto está do lado de uma imagem "float: left".
O resultado ficou assim, com o fundo passando por trás da imagem também, não apenas em volta do texto: https://i.imgur.com/g9IXx1m.png
Tentei mudar o display do bloco de texto para "inline" e "inline-block" mas nenhum funciona como eu queria também. Tentei até meter um "float:right" no bloco de texto para ver se ele ficava flutuando ao lado da imagem mas não rolou tbm rs.
Pelo que pesquisei acho que dá pra resolver mudando um pouco a estrutura para tudo isso ficar em uma div com "display: flex", mas queria saber se existe alguma alternativa para resolver isso mantendo a imagem como "float", sem precisar criar mais divs e tals.
Segue os códigos:
<img class="imagem-sobre" src="utensilios.jpg" alt="Utensílios de barbeiro">
<p>A <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p class="missao">Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos nossos clientes"</strong>.</p>.imagem-sobre {
border-radius: 50%;
float: left;
margin: 0 30px 20px 0;
width: 120px;
}
.missao {
background: #a1873d;
border-radius: 10px;
color: #ffffff;
font-size: 1.4em;
padding: 1em;
}
