Skip to content

Como fazer uma imagem flutuar à esquerda do texto em uma página da web

13 de abril de 2021

Os elementos de nível de bloco em uma página da web aparecem em ordem sequencial. Para melhorar a aparência ou utilidade da página, você pode modificar essa ordem envolvendo blocos, incluindo imagens, para que o texto flua ao redor das imagens. Em termos de web design, esse efeito é conhecido como flutuação da imagem. Isso é conseguido com a propriedade CSS flutuador, que permite que o texto flua ao redor da imagem alinhada à esquerda para o lado direito (ou ao redor de uma imagem alinhada à direita para o lado esquerdo).

Maskot / Getty Images

Comece com HTML

Este exemplo adiciona uma imagem no início de um parágrafo (antes do texto, mas depois da tag de abertura). Esta é a marcação HTML inicial:

O texto do parágrafo vai aqui. Neste exemplo, temos a imagem de uma foto do rosto, portanto, este texto pode descrever a pessoa na foto.

Por padrão, a página seria exibida com a imagem acima do texto, porque as imagens são elementos de nível de bloco em HTML. Isso significa que o navegador exibe quebras de linha antes e depois do elemento de imagem por padrão. Para alterar essa aparência padrão usando CSS, adicione um valor de classe (deixou) ao elemento de imagem para servir como um gancho ao qual as propriedades podem ser anexadas.

O texto do parágrafo vai aqui. Neste exemplo, temos a imagem de uma foto do rosto, portanto, este texto pode descrever a pessoa na foto.

Observe que essa classe não faz nada por conta própria. CSS alcançará o estilo desejado.

Adicionando estilos CSS

Adicione esta regra à folha de estilo do site: .left {
flutuar: esquerda;
preenchimento: 0 20px 20px 0;
}

Este estilo flutua qualquer coisa com a classe deixou à esquerda da página e adiciona um pequeno preenchimento à direita e à parte inferior da imagem para que o texto não bata diretamente contra ela. Em um navegador, a imagem agora seria alinhada à esquerda; o texto apareceria à sua direita com espaço entre os dois. O valor da classe .deixou usado aqui é arbitrário. Você pode chamá-lo do que quiser, porque ele não faz nada por conta própria. No entanto, você também não deve que qualquer valor alterado no CSS também deve ser refletido no HTML.

Outras maneiras de atingir esses estilos

Você também pode retirar o valor da classe da imagem e estilizá-la com CSS escrevendo um seletor mais específico. No exemplo abaixo, a imagem está dentro de uma divisão com um conteúdo principal valor da classe.

O texto do parágrafo vai aqui. Neste exemplo, temos a imagem de uma foto do rosto, portanto, este texto pode descrever a pessoa na foto.

Para estilizar esta imagem, escreva este CSS: .main-content img {
flutuar: esquerda;
preenchimento: 0 20px 20px 0;
}

Nesse cenário, a imagem é alinhada à esquerda, com o texto flutuando ao redor dela como antes, mas sem o valor de classe extra na marcação. Fazer isso em escala pode ajudar a criar um arquivo HTML menor, que será mais fácil de gerenciar e pode melhorar o desempenho.

Evite estilos embutidos

Finalmente, você pode usar estilos embutidos:

O texto do parágrafo vai aqui. Neste exemplo, temos a imagem de uma foto do rosto, portanto, este texto pode descrever a pessoa na foto.

Isso não é aconselhável, no entanto, porque combina o estilo de um elemento com sua marcação estrutural. As melhores práticas determinam que o estilo e a estrutura de uma página permaneçam separados. Essa segregação é especialmente útil quando você precisa alterar o layout da página e procurar diferentes tamanhos de tela e dispositivos com um site responsivo. Entrelaçar o estilo da página com o HTML torna muito mais difícil a criação de consultas de mídia para ajustar seu site a telas diferentes.