A propriedade CSS é uma propriedade muito importante para o layout. Ele permite que você posicione seus designs de páginas da web exatamente como deseja que sejam exibidos - mas para usá-los, você precisa entender como eles funcionam.
Em uma folha de estilos, a propriedade float CSS é semelhante a esta:
.right {float: certo; }
Isso diz ao navegador que tudo com a classe "certo" deve estar flutuando para a direita.
Você iria atribuí-lo assim:
class = "right" />
O que você pode flutuar com a propriedade float CSS?
Você não pode flutuar todos os elementos em uma página da web. Você só pode flutuar elementos no nível do bloco. Esses são os elementos que ocupam um bloco de espaço na página, como imagens (), parágrafos (), divisões () e listas ().
Outros elementos que afetam o texto, mas não criam uma caixa na página, são chamados de elementos in-line e não podem ser exibidos. Esses são elementos como span (), quebras de linha (), ênfase forte () ou itálico ().
Onde eles flutuam?
Você pode flutuar elementos à direita ou à esquerda. Qualquer elemento que segue o elemento flutuante fluirá ao redor do elemento flutuante no outro lado.
Por exemplo, se eu flutuar uma imagem à esquerda, qualquer texto ou outros elementos que a seguem fluirão para a direita. E se eu flutuar uma imagem para a direita, qualquer texto ou outros elementos que a seguem fluirão para a esquerda. Uma imagem colocada em um bloco de texto sem qualquer estilo flutuante aplicada a ela será exibida, no entanto, o navegador está configurado para exibir imagens. Isso geralmente é feito com a primeira linha do texto a seguir exibido na parte inferior da imagem.
Até onde eles vão flutuar?
Um elemento que foi flutuado se moverá para a esquerda ou para a direita do elemento de contêiner, como pode. Isso resulta em várias situações diferentes, dependendo de como seu código é escrito. Para estes exemplos, estarei flutuando um pequeno DIV elemento à esquerda:
- Se o elemento flutuante não tiver uma largura predefinida, ocupará tanto espaço horizontal quanto necessário e disponível, independentemente da flutuação. Observação: alguns navegadores tentam posicionar elementos ao lado de elementos flutuantes quando a largura não está definida, geralmente dando ao elemento não flutuante apenas uma pequena quantidade de espaço. Então você deveria sempre defina uma largura em elementos flutuantes.
- Se o elemento container for o elemento HTML, o flutuante
DIVficará na margem esquerda da página. - Se o elemento contêiner for contido por outra coisa, o flutuante
DIVficará na margem esquerda do contêiner. - Você pode aninhar elementos flutuantes e isso pode fazer com que a flutuação seja colocada em um local surpreendente. Por exemplo, este float é uma esquerda flutuou
DIVdentro de um direito flutuouDIV. - Elementos flutuantes ficarão próximos um do outro se houver espaço no contêiner. Por exemplo, esse contêiner tem três larguras de 100px
DIVelementos flutuavam em um contêiner de 400px de largura.
Você pode até usar carros alegóricos para criar um layout de galeria de fotos. Você coloca cada miniatura (funciona melhor quando eles são todos do mesmo tamanho) em um DIV com a legenda e o flutuador DIV elementos no recipiente. Não importa o tamanho da janela do navegador, as miniaturas serão alinhadas uniformemente.
Desligando o flutuador
Quando você souber como fazer um elemento flutuar, é importante saber como desativar o float. Você desativa o float com a propriedade clear CSS. Você pode liberar flutuadores à esquerda, flutuadores à direita ou ambos:
claro: esquerda;claro: certo;limpar ambos;
Qualquer elemento para o qual você definir a propriedade clear aparecerá abaixo de um elemento que tenha flutuado nessa direção. Por exemplo, neste exemplo, os dois primeiros parágrafos do texto não são apagados, mas o terceiro é.
Jogue com o valor claro de elementos diferentes em seus documentos para obter diferentes efeitos de layout. Um dos layouts flutuantes mais interessantes é uma série de imagens na coluna direita ou esquerda ao lado de parágrafos de texto. Mesmo que o texto não seja longo o suficiente para rolar pela imagem, você pode usar a limpeza em todas as imagens para garantir que elas apareçam na coluna em vez de aparecerem ao lado da imagem anterior.
O HTML (repita este parágrafo):
Duis autue irure dolor sed do eiusmod temporim incididunt in reprehenderit in voluptate. Cupidatat não proativo, ut labore e dolore magna aliqua.
O CSS (para flutuar as imagens à esquerda):
img.float {float: esquerda; claro: esquerda; margem: 5px;}
E para a direita:
img.float {float: certo; claro: certo; margem: 5px;}
Usando Floats para Layout
Depois de entender como o flutuador obras de propriedade, você pode começar a usá-lo para dispor suas páginas da web. Estas são as etapas que tomo para criar uma página da Web flutuante:
- Projetar o layout (em papel ou em uma ferramenta gráfica ou na minha cabeça).
- Determine onde as divisões de página serão.
- Determine as larguras dos vários containers e os elementos dentro deles.
- Flutue tudo. Até mesmo o elemento de contêiner mais externo é flutuado para a esquerda para que eu saiba onde ele estará em relação à porta de exibição do navegador.
Contanto que você saiba que as larguras (porcentagens estão bem) das seções de layout, você pode usar flutuador propriedade para colocá-los onde eles pertencem na página. E o bom é que você não precisa se preocupar tanto com o modelo de caixa sendo diferente para o Internet Explorer ou o Firefox.
