Float

Este capítulo usa float para um único trabalho honesto: texto ao redor de uma imagem na Oficina Costeira. A Oficina Costeira é um coletivo fictício de design em João Pessoa. A grade da página não se faz com float.

O exemplo está em exemplos/25-float/. Toda página usa lang="pt-BR". Este volume tem 52 capítulos.

No main.css do exemplo, a classe .recorte já envolve a marca. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Flutuar uma imagem à esquerda ou à direita.
• Afastar o texto com margem.
• Entender que o float sai do fluxo.
• Usar clear para descer abaixo da imagem.
• Fechar o recorte com clearfix.
• Recusar float como sistema de colunas do site.

Para que o float existe

float nasceu para o jornal: a figura à esquerda, o texto escorrendo à direita. É isso que a Oficina Costeira usa no recorte da orla.

Livros antigos de CSS usavam float para colunas inteiras. Funcionava com gambiarra. O rodapé subia. O pai colapsava. O volume recusa esse caminho. Flexbox no capítulo 26 faz o trabalho de faixa e de cartões.

Não use float para o cabeçalho. Não use para três cartões lado a lado. Não use para o menu. Esses problemas são do Flexbox.

<div class="recorte">
  <img src="assets/imagens/marca.svg" alt="Marca da Oficina Costeira">
  <p>Coletivo fictício de design gráfico em João Pessoa. O recorte da marca senta à esquerda. O parágrafo contorna a figura.</p>
</div>

A imagem precisa de largura. Sem largura, um bloco só de texto flutuado tenta ocupar 100% e o “ao lado” some.

left, right e margem

.recorte img {
  float: left;
  width: 8rem;
  margin: 0 1rem 0.5rem 0;
}

float: left cola a imagem na esquerda do recorte. O texto corre à direita. float: right inverte. float: none desliga.

A margem direita de 1rem impede o texto de encostar na arte. A margem de baixo deixa a última linha respirar quando o texto é curto.

O reset do volume põe display: block nas imagens. Com float, o display deixa de mandar. Float ganha daquele display. Não brigue com as duas propriedades no mesmo seletor.

.recorte img {
  float: right;
  width: 8rem;
  margin: 0 0 0.5rem 1rem;
}

Dois floats na mesma linha só cabem se a soma das larguras (com margem) for menor que o pai. Se não couber, o segundo desce. Isso ainda não é uma grade de página: é wrapping de figuras.

Fora do fluxo

A caixa flutuada sai do fluxo. Os parágrafos vizinhos se comportam como se a imagem não ocupasse altura de bloco. O texto desvia. A caixa do parágrafo pode passar por trás.

Por isso um fundo no parágrafo pode correr debaixo da imagem. Por isso o pai .recorte pode “fechar” com altura zero se só tiver filhos flutuados. O texto seguinte sobe.

Isso assusta na primeira vez. É o motivo do clearfix.

Não dê height fixa no recorte para “segurar” a imagem. O texto cresce com o zoom. O fechamento certo é clear ou o pseudo-elemento de limpeza.

clear desce a caixa

clear: left manda o elemento para baixo de qualquer float à esquerda. right vale à direita. both vale os dois.

.recorte + p {
  clear: both;
}

O parágrafo depois do recorte não tenta abraçar a marca. Começa abaixo.

Um elemento pode ser clear e ainda ser float. O clear só impede que ele suba ao lado de um float anterior.

Use clear no irmão que precisa descer. Não espalhe clear: both em todos os p do site. O recorte da Oficina Costeira fecha o próprio grupo, e o resto do main segue o fluxo.

Clearfix no pai

Se o pai precisa envolver a imagem (fundo, borda, margem de baixo), ele precisa “ver” a altura do float. O jeito antigo era um div vazio com clear. Não polua o HTML.

O jeito do exemplo:

.recorte::after {
  content: "";
  display: block;
  clear: both;
}

O pseudo-elemento é o irmão fictício que desce abaixo da marca. O pai ganha altura. O fundo do recorte cobre imagem e texto.

overflow: hidden no pai também envolve floats. O efeito colateral é recortar o que vazar (sombra, foco). No recorte simples da marca, o ::after é mais previsível.

.recorte {
  overflow: auto;
}

overflow: auto é outra receita clássica. Se aparecer barra de rolagem, volte ao ::after.

O main.css do exemplo já tem o par:

.recorte img {
  float: left;
  margin: 0 1rem 0.5rem 0;
  width: 8rem;
}
.recorte::after {
  content: "";
  display: block;
  clear: both;
}

Pare e experimente. Comente só o ::after. Preveja: se o parágrafo for curto, o bloco seguinte sobe ao lado da marca. Recarregue e confira. Descomente.

Erro comum: flutuar main e aside em 70% e 30% para “fazer o layout”. As caixas saem do fluxo, o rodapé sobe, o clearfix vira pedágio. Flexbox no pai resolve colunas sem tirar as caixas do documento desse jeito.

O que o float não faz neste volume

Não crie .coluna-esq e .coluna-dir com float. Não calcule gutter a mão com 48% + 48%. Não invente .clearfix no body.

Box-sizing continua ligado: se um dia você flutuar duas figuras com padding, a conta border-box evita o estouro. Isso não autoriza a grade.

Quando o texto não deve descer abaixo da imagem, e sim formar uma coluna ao lado com largura desconhecida, overflow: hidden no parágrafo cria um bloco que não envolve a figura. É um truque pontual. Ainda não é o layout do site.

<div class="recorte recorte-col">
  <img src="assets/imagens/marca.svg" alt="Marca da Oficina Costeira">
  <p>Este parágrafo não escorre por baixo da marca. Ele forma uma coluna ao lado, útil quando a largura da figura muda.</p>
</div>

.recorte-col p {
  overflow: hidden;
}

Use só se o texto longo não puder voltar a correr abaixo da arte. Na home da Oficina Costeira, o envolvimento clássico (texto que desce quando passa da altura da marca) é o comportamento desejado. Não copie overflow: hidden em todos os p.

box-sizing: border-box já está no topo do main.css. Se duas figuras flutuarem com padding, a largura declarada já inclui o padding. Isso evita o estouro. Continua sem autorizar uma “grid” de floats.

O capítulo 26 abre o Flexbox: o pai controla os filhos. O float da marca pode continuar existindo dentro de um cartão. Os dois modelos convivem. Cada um no seu problema.

Atividades

1. Qual é o único uso de float combinado neste volume?
2. Por que a imagem flutuada precisa de width?
3. O que acontece com a altura do pai quando os filhos estão com float e não há clearfix?
4. O que .recorte::after { clear: both } resolve sem HTML extra?
5. Por que float no main e no aside é recusado para a página da Oficina Costeira?

Respostas comentadas

1. Texto contornando imagem (ou figura), como no .recorte.
2. Sem largura, um bloco de texto flutuado estica até 100% e não deixa corredor ao lado.
3. O pai pode colapsar a altura. O fundo e a margem de baixo falham. O irmão seguinte sobe.
4. Gera um bloco que desce abaixo da imagem e força o pai a crescer.
5. Tira as regiões do fluxo, quebra o rodapé e imita uma grade frágil. O cabeçalho e as colunas usam Flexbox.

Referências

• float
• clear
• Fluxo e float
• overflow
• display

O arquivo completo

Referência do exemplo 25-float, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}