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 flui em torno das imagens.
Em termos de web design, esse efeito é conhecido como flutuação da imagem. Isso é conseguido com o Propriedade CSSflutuador, 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).
Comece com HTML
Este exemplo adiciona uma imagem no início de um parágrafo (antes do texto, mas após a abertura
marcação). 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 esta 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 ao site folha de estilo:
.deixou {
flutuar: esquerda;
preenchimento: 0 20px 20px 0;
}
Este estilo flutua qualquer coisa com a classe deixou à esquerda da página e adiciona um pouco preenchimento à direita e na 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 deva 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 autoria de consultas de mídia ajustar seu site para telas diferentes muito mais difícil.