34 lines
1.7 KiB
Plaintext
34 lines
1.7 KiB
Plaintext
---
|
|
title: Descreva os 'float' e como funcionam.
|
|
---
|
|
|
|
Float é uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da página, e afetarão o posicionamento de outros elementos (por exemplo, texto irá fluir em torno dos elementos flutuantes), ao contrário de `position: absolute`, que são removidos do fluxo da página.
|
|
|
|
A propriedade CSS `clear` pode ser usada para ser posicionada abaixo de `left`/`right`/`both` elementos flutuantes.
|
|
|
|
Se um elemento pai não conter nada além de elementos flutuantes, sua altura será desmoronada a nada. Ele pode ser corrigido limpando o float após os elementos flutuantes no contêiner, mas antes do fechamento do container.
|
|
|
|
## O hack do Clearfix
|
|
|
|
O hack `.clearfix` usa um CSS inteligente [pseudo-element](/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) para limpar floats. Ao invés de definir o excesso de fluxo no pai, você aplica uma classe adicional `clearfix` para ele. Em seguida, aplique este CSS:
|
|
|
|
```css
|
|
.clearfix::after {
|
|
content: ' ';
|
|
visibility: hidden;
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
}
|
|
```
|
|
|
|
Como alternativa, dê a propriedade `overflow: auto` ou `overflow: hidden` ao elemento pai que estabelecerá um novo contexto de formatação de bloco dentro dos filhos e ele será expandido para conter seus filhos.
|
|
|
|
## Trívia
|
|
|
|
Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade `float` para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, não há muita necessidade de usar a propriedade `float`.
|
|
|
|
## Referências
|
|
|
|
- [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)
|