CSS para iniciantes – Delimitando pontos flutuantes indesejados

Então vamos por a mão na massa. O que são pontos flutuantes[1], no CSS como o nome mesmo diz são pontos que flutuam.

Essa tido de tecnologia é usada mais em tableless[2] que é a substituição de tabelas o que torna o carregamento do site mais rápido e diminui o código, assim fica mais rápido a construção de site pois o mais demorado são as tabelas para organização do conteúdo, bom mais esse não é o objetivo deste artigo explicar o funcionamento de um site e nem construção de tabelas fica para uma próxima artigo.

Vamos la vou mandar alguns trechos de código e explicações.

Vamos agora construção um HTML básico para que possamos testar nossos pontos flutuantes.

<div id=”principal”>
Texto do box principa
 <div id=”ponto1”>
  Texto1 aqui texto1 aqui texto1 aqui
 </div>
 <div id=”ponto2”>
  Texto2 aqui texto2 aqui texto2 aqui
 </div>
</div>

Sobre o código

Existe três DIV cada um com uma marcação[3] diferente para que possamos aplicar style para cara um deles, que são:

• principal
• ponto1
• ponto2

Vejamos o código do CSS em ponto de bala

#principal{
  background: blue;
}
#ponto1{
  background: pink;
  width: 70px;
  float: right;
}
#ponto2{
  background: pink;
  width: 70px;
  float: right;
}

Sobre o código

Cada item com o (#) significa um marcação, marcação essa: #principal, #ponto1 e #ponto2 e dentro de cada marcação estão atribuídos diversos valores cores tamanhos e a flutuação de cada elemento.

Agora vejamos o código em funcionamento.

Veja que o vermelho estão saindo fora da caixa principal no caso o azul. No código CSS não está limitação para os pontos flutuantes, temos que dar uma limitação para que ele não fique encavalando um no outro.
 

Vamos criar um limitação para o ponto flutuantes. Incluir um linha no box principal que que limita os objetos.

Código com a linha incluída

#principal{
  background: blue;
  overflow: hidden; /* Linha Incluida */
}
#ponto1{
  background: pink;
  width: 70px;
  float: right;
}
#ponto2{
  background: pink;
  width: 70px;
  float: right;
}

Foi incluído o código "overflow: hidden;" no box principal o azul.

Vamos testar agora com essa mudança no CSS

E pronto tudo funcionando perfeitamente