Posicionamento CSS
Esquema normal ou fluxo normal é o esquema padrão de posicionamento dos boxe. Segundo as regras desse esquema, elementos de nível de bloco são colocados em sequencia vertical, dentro do elemento que os contém e de cima para baixo, um após o outro na ordem em que aparecem no fluxo do documento, isto é, na marcação HTML. DIV 1
DIV 2 DIV 3 DIV 4 DIV 5
A distância entre cada elemento nível de bloco adjacente é determinada pela propriedade margin. Margens verticais entre blocos adjacente sempre se sobrepõem collapse, ou seja, em lugar de somar as margens será utilizada a margem maior para definir a distancia entre os boxes.
Para elementos inline, a formatação se dá em linha (na horizontal) e dentro do bloco que contém o box inline. A largura do box inline é limitada pela propriedade width do seu bloco container. Excedida aquela largura, o conteúdo do box inline passa para linha de seguinte.
HTML Este texto tem tres elementos inline
p {
}
CSS width:30px;
Este texto
tem tres
eleme ntos inline
Este texto tem tres elementos inline
O esquema float de posicionamento é definido pela propriedade CSS float e seus valores left, right, none e inherit (herdado) . Outra propriedade usada nesse esquema é a propriedade clear e seus valores none, left, right, both e inherit (herdado). Segundo as regras desse esquema, o box é retirado de sua posição de fluxo do documento e flutuado para a direita ou para a esquerda. O espaço original ocupado pelo box não será deixado livre, sendo preenchido pelo elemento que lhe segue no fluxo do documento.
Considere o código:
HTML Div 1 Div 2 Div 3 Div 4 Div 5 Div 6 CSS div { border: solid #000 2px; margin: 5px; padding: 20px 125px; width: 50px; height:20px; }
Neste caso temos o esquema norma, onde um boxe aparece em baixo do outro.
Se adicionamos o esquema float em todos os box eles serão posicionados uma a esqueda do outros. Considere adicionar o código em vermelho.
CSS div { border: solid #000 2px; margin: 5px; padding: 20px 125px; width: 50px; height:20px; float: left; }
Considere o seguinte código:
CSS div { border: solid #000 2px; margin: 10px; } .um { background-color:#FFFF00; width:100px; height: 60px; } .dois { background-color:#00FF00; width:200px; height: 100px; }
.tres { background-color:#0066FF; width:90px; height: 30px; }
HTML Div 1 Div 2 Div 3
O código anterior cria a seguinte estrutura:
• Se aplicarmos a propriedade float: right no div um teríamos o seguinte resultado.
Verifiquem que o div 1 foi posicionado a direita e liberou o espaco que ocupava, assim o div 2 passou a ocupar o seu lugar.
Neste exemplo aplicamos a propriedade float: left também para o div1. Veja que o div 1 continua posicionado a esquerda, porem o espaço que ocupava foi liberado, fazendo com que a div 2 ficasse sobreposta.
Vamos tomar como exemplo uma imagem dentro de um paragrafo.
HTML As borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas, após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.As borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas, após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.
•
Como resultado teríamos isso. Vejam que o texto esta afastado da borda da página Poderiamos resolver isso adicionando a propriedade float a imagem. Exemplo
• Css img { floaf: left; }
Caso fosse definido como right a imagem ficaria alinhada a direita.
Também é possivel fazer citações utilizando a propriedade float. Considere o código HTML a seguir.
As borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas, após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.As borboletas colocam ovos. Esses ovos são germinados e se nascem as lagartas Após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas. Após muito comerem as folhas as lagartas viram casulos e ocorre a metamorfose, se transforma em borboletas.
