Índice:
Vídeo: Curso de HTML5 - 10 - Formatação de Imagens com CSS3 - by Gustavo Guanabara 2025
Os parágrafos e outros elementos de nível de bloco têm um comportamento padrão bem definido no CSS3. Eles tomam toda a largura da página, e o próximo elemento aparece abaixo. Quando você aplica o elemento a um parágrafo, o comportamento desse parágrafo não muda muito, mas o comportamento de com êxito parágrafos é alterado.
Comece olhando uma página com três parágrafos. O parágrafo 2 tem sua propriedade flutuante definida para a esquerda.
Como você pode ver, alguma formatação estranha está acontecendo aqui. Dê uma olhada no que está acontecendo:
-
As bordas foram adicionadas aos parágrafos. Como você verá, a largura de um elemento nem sempre é óbvia observando seu conteúdo. Quando você está mexendo com o flutuador, pode ser aconselhável adicionar bordas aos parágrafos para que você possa ver o que está acontecendo. Você sempre pode remover as bordas quando estiver funcionando corretamente.
-
O primeiro parágrafo age normalmente. O primeiro parágrafo tem o mesmo comportamento que você vê em todos os elementos de estilo bloco. Demora toda a largura da página, e o próximo elemento será colocado abaixo dele.
-
O segundo parágrafo é bastante normal. O segundo parágrafo tem seu atributo float definido para a esquerda. Isso significa que o parágrafo será colocado em sua posição normal, mas esse outro texto será colocado à direita desse elemento.
-
O terceiro parágrafo parece magro. O terceiro parágrafo parece cercar o segundo, mas o texto é pressionado para a direita. O parâmetro float no parágrafo anterior faz com que este seja colocado em qualquer espaço restante (o que atualmente não é muito). O espaço restante fica à direita e, eventualmente, por baixo do segundo parágrafo.
O código para produzir isso é HTML simples com uma marcação CSS igualmente simples:
floatDemo p {border: 2px black solid;}. flutuou {float: left;}
Float Demo
Parágrafo 1. Este parágrafo possui o comportamento normal de um elemento de nível de bloco. Ele ocupa toda a largura da página, e o próximo elemento é colocado por baixo.
Parágrafo 2. Este parágrafo é lançado à esquerda. É colocado para a esquerda e o próximo elemento será colocado à direita.
Parágrafo 3. Este parágrafo não possui flutuação, largura ou margem. É preciso qualquer espaço possível à direita do elemento flutuado e, em seguida, flui para a próxima linha.
Como você pode ver a partir do código, há uma classe simples chamada flutuada com a propriedade flutuante definida para a esquerda. Os parágrafos são definidos da maneira comum. Embora o parágrafo 2 pareça ser incorporado no parágrafo 3 na captura de tela, o código mostra claramente que este não é o caso.Os dois parágrafos estão completamente separados.
