Elementos Flutuantes

7.1 Propriedade float

Elementos flutuantes usando as propriedades float e clear foram um dos primeiros métodos para criar layouts complexos em web design. Mesmo que os métodos modernos, como Flexbox e Grid, sejam frequentemente preferidos, saber usar float e clear ainda é importante para trabalhar em projetos antigos ou entender os fundamentos do CSS.

Propriedade float

A propriedade float permite que um elemento "flutue" para a esquerda ou direita, sendo envolto por texto e outros elementos. Esta propriedade é especialmente útil para criar layouts com colunas e envolver imagens com texto.

Sintaxe:

    
      .element {
        float: left; /* ou right */
      }
    
  

Valores da propriedade float:

• left: o elemento flutua para a esquerda, e os elementos subsequentes o envolvem pela direita
• right: o elemento flutua para a direita, e os elementos subsequentes o envolvem pela esquerda
• none: valor padrão, o elemento não flutua
• inherit: herda o valor do elemento pai

Exemplo de uso do float:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>
    
  

7.2 Propriedade clear

A propriedade clear é usada para controlar o comportamento de envolvimento de elementos flutuantes. Ela permite evitar que um elemento seja envolto por elementos flutuantes de um lado específico.

Sintaxe:

    
      .element {
        clear: left; /* ou right */
      }
    
  

Valores da propriedade clear:

• left: o elemento não será envolto pela esquerda
• right: o elemento não será envolto pela direita
• both: o elemento não será envolto nem pela esquerda nem pela direita
• none: valor padrão, o elemento é envolto por ambos os lados

Exemplo de uso do clear:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>
    
  

Exemplo da técnica "clearfix":

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>
    
  

7.3 Vantagens e desvantagens do uso do float

Vantagens

1. Simplicidade de uso:
   • Facilidade de criar layouts simples com float
2. Amplo suporte dos navegadores:
   • float é suportado por todos os navegadores modernos, incluindo versões antigas
3. Flexibilidade nos layouts:
   • Possibilidade de criar layouts variados, incluindo envolvimento de imagens com texto e criação de layouts de várias linhas

Desvantagens

1. Dificuldades em gerir layouts complexos:
   • float pode causar problemas ao criar layouts complexos, especialmente quando é necessário alinhamento vertical
2. Problemas com a altura dos elementos pais:
   • Elementos pais podem "colapsar" se todos os seus elementos filhos estiverem flutuantes. Isso requer o uso de técnicas como clearfix para correção
3. Obsolescência:
   • Métodos modernos, como Flexbox e Grid, oferecem maneiras mais poderosas e flexíveis de criar layouts

Exemplo de criação de layout com float e clear

Criando um layout de duas colunas usando float e clear.

Neste exemplo, um layout de duas colunas é criado com uma barra lateral (.sidebar) e conteúdo principal (.main). Os elementos .sidebar e .main flutuam para a esquerda, enquanto o elemento .footer com clear: both; previne o envolvimento.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>
    
  

O uso de float e clear ainda é uma ferramenta importante no arsenal dos desenvolvedores web, apesar do surgimento de métodos mais modernos. Entender como eles funcionam ajuda na manutenção e atualização de projetos antigos, bem como na criação de layouts simples. Métodos modernos, como Flexbox e Grid, são frequentemente preferidos para criação de layouts complexos e responsivos, mas conhecer float e clear ainda é relevante.

1

Tarefa

Frontend SELF PT, nível 22, lição 1

Bloqueado

Criação de um elemento flutuante

Criação de um elemento flutuante

Abrir

1

Tarefa

Frontend SELF PT, nível 22, lição 1

Bloqueado

Aplicação da propriedade clear

Aplicação da propriedade clear

Abrir