Seo Portugal
 
 
Segunda, 22 Abril 2019
 
 

Flutuação de elementos (float)


Um elemento pode ser 'flutuar' à esquerda ou à direita com uso da propriedade float. Isto significa que a box e o seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container).

CSS float box

Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem:
CSS float picture

O HTML para o exemplo anterior:


<div id="picture">
    <img src="bill.jpg" alt="Bill Gates">
</div>

<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

Para conseguir este efeito, basta definir uma largura para a box que o contém e declarar para ele float: left;


#picture {
    float:left;
    width: 100px;
}

    

Outro exemplo : colunas

Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando <div>:


<div id="column1">
    <p>Haec disserens qua de re agatur
    et in quo causa consistat non videt...</p>
</div>

<div id="column2">
    <p>causas naturales et antecedentes,
    idciro etiam nostrarum voluntatum...</p>
</div>

<div id="column3">
    <p>nam nihil esset in nostra
    potestate si res ita se haberet...</p>
</div>

A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada uma das colunas:


#column1 {
    float:left;
    width: 33%;
}

#column2 {
    float:left;
    width: 33%;
}

#column3 {
    float:left;
    width: 33%;
}

    

float pode ser declarado left, right ou none.

A propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento.

Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.

A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido both para uma box, a margem superior desta box será posicionada sempre em baixo da margem inferior das boxes que flutuam e que apareçam antes no código.


<div id="picture">
    <img src="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS:


#picture {
    float:left;
    width: 100px;
}

.floatstop {
    clear:both;
}