Antes de entender como são feitas as flutuações, você precisa entender como é o fluxo normal do documento, quando você inseri um elemento em uma página XHTM. Caixas flutuantes não existem no fluxo normal de documento. Se você entender isso, antes de flutuar qualquer DIV, evitará várias dores de cabeça com seu código CSS no futuro.
Na figura acima, quando você flutua a Caixa 1 à esquerda, ela é removida do fluxo do documento e se move para esquerda até sua borda esquerda tocar a borda esquerda do bloco que a contém (DIV contêiner). Como não está mais no fluxo, ela não ocupa mais espaço no documento e fica em cima da Caixa 2.
Se fizer as três flutuarem à esquerda a Caixa 1 será deslocada para esquerda até tocar a caixa que a contém, e as outras até tocarem as caixas flutuantes anteriores.
Tome cuidado com as medidas das caixas (Contêiner). Caso não haja espaço horizontal suficiente, a caixa flutuante não se alinhar ao lodo da caixa anterior e ficar embaixo da caixa 1 ou pode ficar presa.
Na figura acima, quando você flutua a Caixa 1 à esquerda, ela é removida do fluxo do documento e se move para esquerda até sua borda esquerda tocar a borda esquerda do bloco que a contém (DIV contêiner). Como não está mais no fluxo, ela não ocupa mais espaço no documento e fica em cima da Caixa 2.
Se fizer as três flutuarem à esquerda a Caixa 1 será deslocada para esquerda até tocar a caixa que a contém, e as outras até tocarem as caixas flutuantes anteriores.
Tome cuidado com as medidas das caixas (Contêiner). Caso não haja espaço horizontal suficiente, a caixa flutuante não se alinhar ao lodo da caixa anterior e ficar embaixo da caixa 1 ou pode ficar presa.
Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email
Marcelo R. Souza
2 comentários:
Ola Marcelo,
Vim aqui agardecer pessoalmente o seu comentário no Fique-Rico.com.
Ganhas-te mais um leitor. Boa customização do blogger. Gostei do teu template e pricipalmente dos minibanners no topo para a pub.
Grande abraço colega
Artur
@Artut o Fique-Rico se tornou minha bíblia para melhoramento dos meus blogs e é sempre um prazer comentar em artigos de grande qualidade. Obrigado pelo comentário e espero atender o melhor possível meus leitores
Postar um comentário
Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:
<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>
Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa