Minicursos - CSS

Propriedades de Flutuação


Agora vamos falar sobre as propriedades de flutuação do CSS. São poucas, mas muito importantes.

Float

Essa propriedade aceita os valores left, right e none. Basicamente o que ela faz é flutuar com os objetos, para a direita ou esquerda, dependendo do valor recebido como parâmetro. Abaixo vai um exemplo de uma das utilizações:

.flutuarEsquerda
{float:left;}

Então no código HTML fiz da seguinte forma:

<img src=”edvac.jpg” alt=”EDVAC” class="flutuarEsquerda" />

O resultado gerado foi:

CSS Float

A propriedade float normalmente é utilizada já no início de criação de um site, quando se está estruturando os blocos que receberão o conteúdo. É bastante comum encontrarmos a seguinte disposição de espaços:

CSS Float

Essa é uma estrutura bastante simples, mas como citei, muito encontrada pela web. Vale lembrar que a propriedade float tem sempre como referência o seu elemento-pai, ou seja, se pegarmos o layout acima e, dentro da div corpo, colocarmos um objeto para flutuar para a esquerda ele não irá para a região do menu, mas sim para o canto esquerdo da div corpo, dessa forma:

CSS Float

E é possível, dentro de um mesmo elemento-pai, colocar dois objetos para flutuar, um para cada lado, gerando o seguinte layout:

CSS Float

Eu dei três exemplos seguidos de posicionamento de layouts, mas talvez o maior uso dos floats seja para posicionar imagens. Vou dar exemplos reais, que também demonstrarão as diferenças entre usar e não usar essa propriedade. Afinal de contas, para quem está começando a criar páginas, pode parecer meio óbvio que basta posicionar a imagem ao lado de um parágrafo no código HTML para que ela permaneça lá, mas o navegador colocará um em cima do outro, vejam esses códigos:

Código CSS:

.{font-size:14px; width: 50%;}
.flutuarEsquerda{float:left;}

Agora esse HTML:

<body>
<img src="LoremIpsum.jpg" />
<p class="">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</body>
</html>

Eu inseri uma imagem e em seguida um parágrafo, mas reparem que a imagem não faz uso da propriedade float criada no CSS, pois eu não a vinculei à classe criada. A exibição no navegador será assim:

CSS Float

Mas não é isso que queremos e sim o texto ao lado da imagem, certo? Então vamos vincular a imagem ao atributo responsável por isso.

Agora o HTML usado será esse:

<body>
<img src="LoremIpsum.jpg" class="flutuarEsquerda"/>
<p class="">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</body>
</html>

E a página será exibida da seguinte forma:

CSS Float

Agora nossa imagem está flutuando para a esquerda e o texto se posicionou ao seu lado. Vamos inserir uma outra imagem flutuando para a direita, deixando o código CSS assim:

.{font-size:14px; width: 50%;}
.flutuarDireita{float:right;}
.flutuarEsquerda{float:left;}

E o HTML assim:

<html>
<body>
<img src="LoremIpsum.jpg" class="flutuarEsquerda"/>
<img src="Lorem2.gif" class="flutuarDireita"/>
<p class="">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</body>
</html>

Agora a página ficou assim:

CSS Float

Vejam só o nosso texto no centro e as duas imagens flutuando em suas laterais. Basicamente o funcionamento do float é esse, mas ainda vamos falar um pouco dele.

Clear

Essa propriedade é bastante interessante e está diretamente ligada ao float. O clear impede que um elemento, seja ele quem for, flutue ao redor de onde ele estiver aplicado. Vou dar um exemplo para demonstrar. No parágrafo do nosso exemplo vou aplicar o clear, deixando o código CSS assim:

.{font-size:14px; width: 100%; clear:both;}
.flutuarDireita{float:right;}
.flutuarEsquerda{float:left;}

Vejam nossa página:

CSS Float

Percabam que as duas imagens continuam flutuando, mas o parágrafo se deslocou para fora da direção de onde elas estão. É bastante comum usarmos o clear em rodapés, para impedir que outras regiões flutuantes da página se sobreponham a ele. Resumindo, o Clear impede que qualquer objeto flutue ao lado dele.

Neste caso eu apliquei o valor both, portanto estou dizendo que quero que o parâmetro clear seja aplicado a ambos os lados, mas nós poderíamos definir apenas um. Vou mudar nosso exemplo e aplicar o clear apenas do lado esquerdo. Vou também colocar uma imagem de altura bem diferente, para que fique bem nítido o que está acontecendo. Nosso CSS agora vai ficar assim:

.{font-size:14px; width: 100%; clear:left;}
.flutuarDireita{float:right;}
.flutuarEsquerda{float:left;}

CSS Float

Percebam que com o clear aplicado para o lado esquerdo estamos dizendo ao navegador que nenhum elemento pode flutuar desse lado, mas do lado direito estamos permitindo, por isso o texto ocupa a mesma direção da imagem flutuando do lado direito. Isso é extremamente útil e em praticamente todos os grandes sites da Internet este recurso é utilizado com frequência.



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa

Conheça o Playstation 2 portátil criado por um brasileiro

Claudio Adriano decidiu criar uma versão portátil do console Playstation 2, da Sony. Inspirado no Nintendo Switch, o console ficou pronto depois de 2 anos de trabalho e algumas interessantes adaptações. Partindo de uma placa-mãe de um PS2 Slim, Claudio fez os encaixes necessários para que a pla...

Ler Notícia Completa

Playstation 4 já vendeu mais de 116 milhões de unidades

Embora a nova geração de consoles já tenha chegado definitivamente, o PS4 ainda vem registrando bons números e ultrapassou a marca dos 116 milhões de aparelhos vendidos ao redor do mundo. Possivelmente a confirmação da Sony de que títulos bastante esperados, como o novo God Of War e Horizon Forb...

Ler Notícia Completa

Nintendo Switch supera Xbox 360 e PS3 em número de unidades vendidas

Em números divulgados nesta quinta-feira (05) a Nintendo confirmou a quantia de 89 milhões de unidades vendidas do seu console Switch, deixando para trás o Playstation 3, com 87 milhões de unidades e o Xbox 360, com 80 milhões. O próximo console na lista para ser ultrapassado é o Wii, também da...

Ler Notícia Completa

Far Cry 5 está de graça para todas as plataformas por tempo limitado

A Ubisoft liberou o game Far Cry 5 entre os dias 5 e 9 de agosto para todas as plataformas (PS4, PS5, Xbox One, Series X e Series S, Google Stadia e PC). A notícia é ótima, claro, mas ao contrário do que normalmente acontece, o jogo só poderá ser jogado gratuitamente até o dia 9 de agos...

Ler Notícia Completa

Você sabia?

Instalar vários programas com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!