WDD 130: Fundamentos da Web

S03 Atividades de Aprendizagem: Layouts do CSS – Float

Visão Geral

A propriedade float do CSS deve ser usada para propósitos específicos, e não para layout geral de uma página. Por exemplo, seria apropriado colocar imagens relacionadas com float à esquerda ou à direita dentro de contêineres com parágrafos ou outros conteúdos de artigos. Ao usar float, o elemento é removido do layout de fluxo normal.

Preparação

float: right;
margin: 20px;

Float é uma propriedade do CSS que pode ser aplicada a elementos para removê-los do fluxo normal da página e permitir que outros elementos os envolvam. A propriedade float pode ser aplicada a elementos em nível de bloco e elementos inline. Ela pode ser definida como left (esquerda) ou right (direita) para mover o elemento horizontalmente no fluxo do documento. Por exemplo, este bloco de código neste parágrafo tem float para a direita e contém uma declaração margin abreviada que aplica uma margem em todos os lados do elemento.

Conteúdo que aparece depois dos elementos flutuantes

A propriedade clear em CSS é usada para controlar como os elementos se posicionam em torno de elementos flutuantes. Ao usar a propriedade float para mover elementos para o lado esquerdo ou direito do seu contêiner, os demais elementos se ajustarão ao redor deles. A propriedade clear permite interromper esse comportamento e forçar um elemento a ficar abaixo de quaisquer elementos flutuantes.

Ao usar clear: left em um elemento, ele se moverá para baixo de quaisquer elementos flutuantes que estejam posicionados à esquerda, garantindo que nenhum elemento flutuante à esquerda apareça ao seu lado esquerdo. Da mesma forma, clear: right faz com que o elemento fique abaixo de quaisquer elementos que flutuem à direita, enquanto clear: both garante que o elemento fique abaixo de todos os elementos flutuantes em ambos os lados.

Instruções da Atividade

1. Abra o arquivo float.html na pasta semana03.
2. Abra também o arquivo CSS vinculado chamado float.css, que está localizado na subpasta estilos.
3. Em qual elemento do HTML o float foi usado?
   Avalie Seu Conhecimento

   O float é aplicado ao elemento img que foi incorporado dentro do elemento div com a classe col1.

4. O que aconteceria se você usasse clear: both; no seletor footer em CSS? Tente você mesmo!
   Avalie Seu Conhecimento

   O conteúdo do elemento footer retornaria ao fluxo normal em relação a img com float.