Position

Float

O float é uma propriedade que tem a função de fazer um elemento flutuar para a direita ou para a esquerda, permitindo que outros elementos se posicionem ao seu redor. Ele é comumente usado para criar layouts de texto e imagens, onde o conteúdo pode ser alinhado à esquerda ou à direita, enquanto o restante do conteúdo flui ao redor dele.

O float é frequentemente utilizado para criar layouts de colunas, onde um elemento pode ser flutuado para a esquerda e outro para a direita, permitindo que o conteúdo seja organizado de forma mais flexível. No entanto, é importante notar que o uso excessivo do float pode levar a problemas de layout, como elementos sobrepostos ou colapsados, especialmente quando não são usados corretamente.

Aplicabilidade do float atualmente

O float é uma propriedade que tem sido amplamente utilizada no desenvolvimento web para criar layouts de texto e imagens. No entanto, com o avanço das tecnologias de layout, como Flexbox e Grid, o uso do float tem se tornado menos comum para a criação de layouts complexos.

Atualmente, o float é mais comumente usado para criar layouts simples de texto ou para alinhar pequenos blocos de conteúdo à esquerda ou à direita. Ele continua sendo útil pela simplicidade do código.

Exemplo:

 
        float:right;
       
    p::first-letter{
        font-size: 3em;
        float: inline-start;
    }
    p{
        text-indent: 0;
    }
    
                        

Peculiaridade do float

O float tem uma característica peculiar: ele perde sua referência no fluxo normal do documento. Isso significa que o contêiner e os elementos posicionados abaixo do elemento flutuante não o reconhecem, podendo causar problemas de layout com sobreposição de elementos.

Veja os exemplos abaixo:

1º Exemplo: O elemento flutuante se sobrepõe aos outros elementos dentro do contêiner.

<div style=" border: 2px solid #0f0;">
    <div class="int int-red"></div>
    <div style="float: left; margin-left: 10px;" class="int int-green"></div>
    <div class="int int-blue"></div>
</div>
                    

2º Exemplo: Como todos os elementos possuem a propriedade float, o próprio contêiner não reconhece a altura deles. Isso gera problemas no layout dos elementos em volta do contêiner.

<div style=" border: 2px solid #0f0;">
    <div style="float: right;" class="int int-red"></div>
    <div style="float: left;" class="int int-green"></div>
    <div style="float: right;" class="int int-blue"></div>
</div>
                    

Exemplo:

<div style="border: solid 2px #0f0; overflow: auto;">
    <div style="float: right" class="int int-green"></div>
    <div style="float: right" class="int int-red"></div>
    <div style="float: right" class="int int-blue"></div>
</div>
                        

Clear

Essa propriedade foi desenvolvida para trabalhar junto com float, pois sua finalidade é fazer com que os elementos flutuantes respeitem os elementos que não possuem float. Assim, evita-se que elementos flutuantes se sobreponham a eles.

Essa propriedade funciona da seguinte forma:

• Clear: left; Faz com que o elemento não flutue à esquerda de elementos com float: left. Elementos com float: right não são afetados.
• Clear: right; Faz com que o elemento não flutue à direita de elementos com float: right. Elementos com float: left não são afetados.
• Clear: both; Faz com que o elemento respeite tanto elementos float: left quanto float: right, posicionando-se abaixo de todos eles.

Layout de sites antigos usando float

Antigamente, a melhor forma de criar layouts era usando float, que funcionava de maneira similar ao Flexbox e Grid atuais. Veja o exemplo abaixo:

<div style="height: 400px; width: 350px; border: 2px solid #0f0; margin: auto;">
    <div class="int int-red" style=" width: 346px;"> HEADER</div>
    <div class="int int-green " style="float:left; height: 200px;">NAV</div>
    <div class="int int-blue  " style="float:left; height: 200px; width: 246px; ">MAIN</div>
    <div class="int int-yellow" style=" clear:both; width: 346px; ">FOOTER</div>
</div>