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). ![]() Se desejamos que um texto seja posicionado em volta de uma figura como mostrado abaixo, basta flutuarmos a imagem: ![]() 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; } |