⚡ Float, Clear, Block e Inline
⚠️ Nota Importante: Float era amplamente usado para layouts antes do Flexbox e Grid. Hoje é usado principalmente para flutuar imagens dentro de texto.
🌊 Float
/* Float básico */
.esquerda { float: left; } /* Flutua à esquerda */
.direita { float: right; } /* Flutua à direita */
.normal { float: none; } /* Comportamento padrão */
/* Dica: Sempre defina width em elementos flutuados */
.sidebar {
float: left;
width: 250px;
}
Float Left
Elemento flutuado à esquerda
Float Right
Flutuado à direita
Este texto flui ao redor dos elementos flutuados. Float remove os elementos do fluxo normal do documento, permitindo que o conteúdo subsequente flua ao seu redor. É importante notar que elementos flutuados podem causar problemas de layout se não forem gerenciados adequadamente. O texto continua fluindo e se adapta aos espaços disponíveis ao redor dos elementos flutuados, criando um efeito de "envolvimento" que era muito utilizado em layouts de jornais e revistas.
🚫 Clear
/* Clear evita que elementos fiquem ao lado de floats */
.limpar-esquerda { clear: left; } /* Não permite floats à esquerda */
.limpar-direita { clear: right; } /* Não permite floats à direita */
.limpar-ambos { clear: both; } /* Não permite floats em ambos lados */
Float 1
Float 2
Float 3
Clear: left - Este elemento não permite floats à sua esquerda
Float 4
Float 5
Clear: both - Este elemento força uma nova linha, sem floats ao lado
🔧 Clearfix
/* Clearfix - força o pai a "envolver" filhos flutuados */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* Alternativa moderna */
.clearfix {
overflow: hidden;
}
SEM Clearfix (contêiner colapsa)
Float 1
Float 2
Float 3
💡 Dica: Use overflow: hidden; no pai como clearfix simples, ou a técnica ::after para casos mais complexos.
🧱 Elementos Block
/* Características dos elementos BLOCK */
display: block;
/* Propriedades que funcionam: */
width: 300px; ✅ Funciona
height: 100px; ✅ Funciona
margin: 20px; ✅ Funciona (todos os lados)
padding: 15px; ✅ Funciona (todos os lados)
/* Comportamento: */
- Ocupam largura total do pai (por padrão)
- Iniciam em nova linha
- Empilham verticalmente
Elemento Block 1 - Largura: 70%
Elemento Block 2 - Cada um em sua linha
Elemento Block 3 - Respeitam width e height
📝 Elementos Inline
/* Características dos elementos INLINE */
display: inline;
/* Propriedades que NÃO funcionam: */
width: 300px; ❌ Ignorado
height: 100px; ❌ Ignorado
margin-top: 20px; ❌ Não afeta layout
margin-bottom: 20px; ❌ Não afeta layout
/* Propriedades que funcionam: */
margin-left: 10px; ✅ Funciona
margin-right: 10px; ✅ Funciona
padding: 5px; ✅ Funciona (mas pode sobrepor)
Elementos inline fluem no mesmo parágrafo:
Inline 1
Inline 2
Inline 3
e continuam na mesma linha quando há espaço.
🔄 Inline-Block
/* INLINE-BLOCK - melhor dos dois mundos */
display: inline-block;
/* Combina características: */
✅ Flui como inline (mesma linha)
✅ Aceita width e height como block
✅ Respeita margins em todos os lados
✅ Útil para menus, botões, cards
Card 1
120px × 80px
Card 2
120px × 80px
Card 3
120px × 80px
🎯 Uso comum: Inline-block é perfeito para criar menus horizontais, grids simples de cards ou qualquer layout onde você quer elementos lado a lado com controle total de dimensões.
📊 Comparação Visual
Block:
Elemento Block
Outro Block
Inline:
Inline 1
Inline 2
Inline 3
Inline-block:
IB 1
IB 2
IB 3
Dev by Maugus em CSS puro 🎨