Isso não acontece por padrão. Repare que, observando as tags HTML que usamos até agora, os elementos da página são desenhados um em cima do outro. É como se cada elemento fosse uma caixa (box) e o padrão é empilhar essas caixas verticalmente. Mais pra frente vamos entender melhor esse algoritmo, mas agora o importante é que ele atrapalha esse nosso design.
Temos um problema: a tag
<figure> ocupa toda a largura da página e aparece empilhada no fluxo do documento, não permitindo que outros elementos sejam adicionados ao seu lado.
Este problema pode ser solucionado por meio da propriedadefloat. Esta propriedade permite que tiremos um certo elemento do fluxo vertical do documento o que faz com que o conteúdo abaixo dele flua ao seu redor. Na prática, vai fazer exatamente o layout que queremos.
Em nosso exemplo, o conteúdo do parágrafo tentará fluir ao redor da nossa imagem com float. Perceba que houve uma perturbação do fluxo HTML, pois agora a nossa imagem parece existir fora do fluxo.
Nenhum comentário:
Postar um comentário