Para demonstrar a importância da propriedade float neste exemplo, aqui está uma captura de tela da mesma imagem após usar o firebug para remover o float: left:

Galerias de fotos baseadas em grade

Um uso simples da propriedade float é float: deixou uma série de fotografias contidas em uma lista não ordenada, que obtém o mesmo resultado que você poderia ver em um layout de tabela.

A página de produtos mais importante do Canadá (veja a imagem acima) exibe seus produtos em formato de grade ao lado da barra lateral. As fotos são exibidas como uma lista não ordenada com a propriedade float, para todos

A página de futons da Paragon Furniture (veja a imagem acima) é outro exemplo de uma página de produto usando uma lista não ordenada com etiquetas flutuantes

A página de resultados de pesquisa da iStockphoto (veja a imagem acima) também tem uma grade de fotos estruturadas, aqui as fotos contêm flutuador: esquerda

Alinhamento campos com botão

Modelar os elementos de formulário padrão para navegadores diferentes pode ser problemático. Muitas vezes, em um campo de formulário, como um formulário de pesquisa, você precisa colocar o item próximo ao botão enviar.

A propriedade Float é um recurso poderoso e poderoso para desenvolvedores da web HTML e CSS. Por outro lado, pode ser frustrante e confuso se você não entender totalmente como funciona.

Tradução de um artigo CSS Floats 101... Alistapart.com original

Além disso, no passado, devido a alguns bugs desagradáveis \u200b\u200bno navegador, era normal ficar nervoso ao usar a propriedade flutuador em seus conjuntos de regras CSS. Mas vamos acalmar nossos nervos e tentar aliviar a frustração. Vou mostrar exatamente o que a propriedade float faz aos seus elementos e como é conveniente usá-la.

Vemos flutuações todos os dias no mundo da impressão quando olhamos para um artigo de revista com uma imagem à esquerda ou direita e um texto bem posicionado ao redor. No mundo HTML / CSS, o texto envolverá uma imagem dependendo da propriedade float aplicada a essa imagem. Usar a propriedade float em uma imagem é apenas um exemplo de muitos. Como exemplo, com a propriedade float podemos tornar o popular layout de duas colunas muito fácil. Na verdade, você pode flutuar qualquer elemento em seu HTML. Tendo aprendido e compreendido o uso da propriedade float, junto com a propriedade position, você pode se sentir confortável e confiante ao criar qualquer layout.

Definição de flutuação

Vamos começar definindo o que é flutuador.

Float é convencionalmente uma caixa que se move para a direita ou esquerda ao longo da linha atual. A característica mais interessante do float é que o conteúdo pode fluir ao longo de sua lateral. Ao usar a propriedade float: left, o conteúdo envolverá a caixa para baixo no lado direito e da mesma forma para float: right, para baixo no lado esquerdo.

A propriedade float possui 4 valores que podemos aplicar: left, right, inherint e none. Cada significado é bastante autoexplicativo. Por exemplo, se você flutuar: da esquerda para um elemento, ele irá flutuar para a borda mais à esquerda de seu pai. E, se você definir float: right, o elemento se moverá da mesma forma para a direita. O valor ihnerit diz ao elemento para herdar a propriedade de seu pai. E o último valor nenhum é o padrão e diz para não aplicar a propriedade flutuador a este item.

#container (width: 960px; margin: 0 auto;) #content (float: left; width: 660px; background: #fff;) #navigation (float: right; width: 300px; background: #eee;) #footer ( limpar: ambos; plano de fundo: #aaa; preenchimento: 10px;)

Nosso #footer está preso no bloco de #navegação. Isso aconteceu porque existe um lugar para #footer sob o bloco de # navegação e este é o comportamento correto para o fluxo normal do layout do bloco. Mas, isso absolutamente não é o que queremos, é? Suponho que você já veja a relação entre float e clear e entende como eles se complementam.

Se você tem transtorno obsessivo-compulsivo como o meu, deve ter notado no Exemplo F as diferentes alturas das colunas #content e #navigation; existem várias soluções, mas isso está além do escopo deste artigo. Eu recomendo fortemente a leitura de Faux Columns de Dan Cederholm para aprender como fazer blocos da mesma altura, independentemente do conteúdo dentro.

Flutue primeiro

Até agora, vimos alguns exemplos bem simples que não criam muita dor de cabeça. Existem, no entanto, algumas armadilhas a serem consideradas ao usar a propriedade float. Surpreendentemente, uma das maiores armadilhas não é CSS, mas HTML. Colocar seu elemento flutuante dentro de seu HTML pode produzir resultados diferentes. Dê uma olhada no Exemplo H.

Aqui temos um pequeno bloco que tem um flutuador: imagem à direita com o texto ao seu redor. Nosso CSS se parece com isto:

#container (largura: 280px; margem: 0 automático; preenchimento: 10px; plano de fundo: #aaa; borda: 1px sólido # 999;) img (float: direita;)

Nosso elemento pai, #container, tem uma largura estreita e mantém nosso elemento flutuante (imagem) dentro de suas bordas. Nosso código HTML é parecido com este:

Este exemplo nos dá o resultado desejado, mas e se pegarmos e reorganizarmos alguns elementos em HTML? No Exemplo I, mudei depois do texto

Este é algum texto contido em uma pequena caixa. Estou usando-o como um exemplo de como colocar seus elementos flutuantes em diferentes ordens em seu HTML pode afetar seus layouts. Por exemplo, dê uma olhada neste ótimo espaço reservado para fotos que deveria estar à direita.

Nosso resultado não é o que esperávamos. Nossa imagem foi movida para a direita, mas não está mais no canto superior como desejamos, mas caiu abaixo do parágrafo; ainda pior, ele se destaca na parte inferior de nosso pai #container. O que está acontecendo?

Primeiramente. Minha regra que descobri para mim mesmo é primeiro flutuar os elementos. Em meu HTML, quase sempre adiciono elementos flutuantes no início da minha marcação e na frente dos meus elementos não flutuantes favoritos com os quais meus elementos flutuantes irão interagir, como o parágrafo no exemplo acima. Na maioria dos casos, isso dá um resultado positivo.

Em segundo lugar. A razão pela qual a imagem parece estar projetada na parte inferior de nosso bloco #container tem a ver com algo chamado de colapso. Vamos falar sobre colapso e opções de solução.

Colapsando

O recolhimento ocorre quando um elemento que possui qualquer número de elementos flutuantes não expande suas bordas ao redor dos elementos aninhados, como faria se os elementos aninhados não fossem flutuados.

Agora vamos tentar consertar isso com CSS em vez de adicionar marcação HTML adicional ao nosso documento, como fizemos antes. Há um método que permite ao pai "aplicar" a propriedade clear após todos os elementos flutuantes. Para fazer isso, use o estouro da propriedade CSS com o valor oculto. Observe que a propriedade overflow não foi projetada para este uso e pode causar alguns problemas, como ocultar conteúdo ou o aparecimento de uma barra de rolagem indesejada. Para nosso exemplo, no entanto, ainda aplicaremos a propriedade overflow: hidden ao nosso #container pai:

#container (transbordamento: oculto; largura: 260px; margem: 0 automático; preenchimento: 10px 0 10px 10px; plano de fundo: #aaa; borda: 1px sólido # 999;)

E finalmente, Eric Meyer explica a terceira solução para esse problema em seu artigo Contendo flutuadores. De acordo com CSS Spec 2.1:

um elemento com a propriedade float expandirá suas bordas para elementos flutuantes internos.

Assim, ao aplicar a propriedade float a #container, nosso container conterá nossa imagem e parágrafo, semelhante aos métodos descritos acima.

Em última análise, todas essas decisões têm o mesmo efeito. Eles fazem os elementos pai contar seus elementos flutuantes no fluxo. Cada um dos métodos tem suas próprias vantagens e benefícios. Você deve compreender cada um deles e, em seguida, aplicar aqueles que funcionam melhor para sua situação.

Conclusão

Usando a propriedade float, você pode melhorar significativamente sua técnica de layout. Entender como essa propriedade funciona e o que afeta seu comportamento lhe dará uma base sólida para o uso eficaz de float.

Em web design moderno, a propriedade flutuador usado em quase todas as etapas. Mas, apesar dessa prevalência, nem todos entendem o mecanismo de operação dos blocos flutuantes, seu comportamento e quais as consequências de seu uso.

O que é flutuação?

Flutuador esta é uma propriedade de posicionamento CSS. Para entender sua essência e origem, você precisa voltar sua atenção para o design de impressão. Em layouts impressos, a imagem pode ser posicionada de forma que o texto flua ao seu redor. Isso geralmente é chamado de " quebrar texto".

No layout da página, o bloco que contém o texto pode ser especificado para uso envolver o texto em uma imagem ou ignore o acondicionamento. Ignorar a quebra automática de texto permitirá que as palavras fluam sobre a imagem como se ela não existisse. Essa é a diferença se a imagem faz parte do fluxo da página ou não. No web design tudo é muito parecido.

Em web design, um elemento com uma propriedade CSS aplicada a ele flutuador irá se comportar como uma imagem com o texto enrolado em um layout impresso. Os elementos flutuantes permanecem parte do fluxo da página da web. Isso não é o mesmo que elementos absolutamente posicionados, que são removidos do fluxo, como se no layout de impressão o bloco de texto fosse instruído a ignorar o fluxo ao redor da imagem. Os elementos absolutamente posicionados não afetam a colocação de outros elementos, e outros elementos não afetam a sua colocação.

Definir uma propriedade flutuador para elementos que usam CSS tem a seguinte aparência:

#sidebar (float: right;)

Existem quatro valores válidos para a propriedade flutuador - esquerda, certo, nenhum, herdar... Os dois primeiros, esquerda e certo indicar as direções de localização - esquerda e direita, respectivamente. Nenhum - valor padrão, indica que o elemento não é flutuante e herdar instruindo o elemento a herdar o valor da propriedade flutuador do elemento pai.

Para que serve o float?

Além de um exemplo simples de envolver o texto em uma imagem, flutuador pode ser usado para criar layouts da web.

Flutuador, também útil para pequenos elementos de layout. Por exemplo, pegue este pequeno trecho de uma página da web. Se definirmos a propriedade flutuador para uma pequena imagem de avatar, então, quando o tamanho da imagem mudar, a embalagem mudará de acordo com as novas dimensões da imagem:

O mesmo layout pode ser implementado usando o posicionamento relativo do contêiner e o posicionamento absoluto do avatar e do texto nele. Mas em um layout implementado de acordo com este esquema, o redimensionamento da imagem não afetará o bloco de texto, uma vez que elementos com posicionamento absoluto não afetam outros elementos e outros elementos não os afetam.

Reiniciar envoltório

Claro propriedade relacionada a propriedade flutuador... Elemento com propriedade definida claro não se moverá para cima em torno de um elemento com uma propriedade definida flutuadormas irá flutuar ignorando o fluxo. E novamente, uma ilustração que explicará tudo sem mais delongas.

No exemplo acima, a barra lateral estava flutuando à direita do bloco de conteúdo principal. O rodapé foi movido para um local vazio sob a barra lateral, envolvendo o bloco de conteúdo principal. Para contornar esse problema, você precisa especificar um valor para a propriedade clear: both do "rodapé" para "limpar" o agrupamento em torno de ambas as colunas.

#footer (clear: both;)

Propriedade claro tem quatro significados. Ambos usado para redefinir o envoltório em ambas as direções. Esquerda e Certo são usados \u200b\u200bpara redefinir uma direção - esquerda ou direita, respectivamente. Nenhum é o padrão. Herdar pode ser o quinto valor, mas surpreendentemente não é compatível Internet Explorer... Reinicializar apenas o fluxo esquerdo ou direito é muito raro, mas tem benefícios práticos.

Grande colapso

Uma coisa a fazer com flutuador intrigante é o efeito que essa propriedade tem sobre os elementos pais. Se o elemento pai não contiver outros elementos além de um flutuante, sua altura literalmente será reduzida. Isso nem sempre é perceptível, especialmente se o pai / mãe não tiver um histórico perceptível, mas é importante manter isso em mente.

Mas a alternativa para tal colapso é ainda pior. Considere o seguinte cenário:

Se o bloco superior se expandir automaticamente para acomodar o elemento flutuante, teremos uma quebra no fluxo do texto entre os parágrafos, sem a possibilidade de eliminá-lo. Se fosse esse o caso, os desenvolvedores reclamariam com muito mais frequência sobre esse comportamento dos blocos flutuantes do que sobre o colapso agora.

O recolhimento deve ser sempre lembrado para evitar comportamento estranho de layout e problemas entre navegadores. Podemos resolver este problema usando claro após o elemento flutuante no contêiner, mas antes de o contêiner ser fechado.

Técnicas de cancelamento de embrulho

Se você estiver em uma situação em que sabe onde estará o próximo elemento, você pode usar clear: both e cuidar de seus negócios. Isso é ideal porque não requer hacks ou elementos adicionais. Mas, infelizmente, nem tudo sai como queremos e, neste caso, você pode usar as seguintes ferramentas.

Método de bloco vazio.

É literalmente um bloco vazio.

Método de estouro.

Com base na especificação de uma propriedade CSS transbordar para o elemento pai. Se esta propriedade for definida como auto ou escondido para o elemento pai, ele se expandirá após o elemento flutuante, limpando efetivamente o flutuador ao redor dele para os elementos subsequentes. Esse método pode ser semanticamente bonito, pois não requer elementos adicionais. No entanto, como você pode ver, adicionamos um novo div para usar este método, que é equivalente a usar um bloco vazio não semântico e é menos flexível. Também deve ser lembrado que a propriedade transbordar não se destina a desativar o empacotamento. Tenha cuidado para não ocultar acidentalmente o conteúdo ou causar barras de rolagem indesejadas.

Método de limpeza fácil.

Usa o pseudo-seletor CSS (: depois) para remover a embalagem. Em vez de usar a propriedade transbordar defina uma classe adicional para o elemento pai, por exemplo "clearfix" e use o seguinte estilo CSS:

Clearfix: after (content: "."; Visibility: hidden; display: block; height: 0; clear: both;)

Isso usa uma pequena parte do conteúdo, oculta da visualização, localizada após o elemento pai, que remove a embalagem. Esse método não é completo, pois precisa ser caro para oferecer suporte a navegadores mais antigos.

Situações diferentes requerem métodos diferentes para redefinir o flutuador. Considere, por exemplo, uma grade de blocos de diferentes tipos.

Para uma melhor integração visual de blocos semelhantes, devemos iniciar uma nova linha quando a cor mudar. Podemos usar o método de overflow ou light clear se cada grupo de cores tiver um pai. Ou use o método de bloco vazio entre grupos. Três blocos pais que não existiam antes ou três blocos vazios que não existiam antes. Cabe a você decidir qual método é o melhor.

Problemas com elementos flutuantes

Elementos flutuantes são frequentemente criticados por sua fragilidade. Muito dessa fragilidade vem do IE6 e seu bugs orientados para flutuação... Mas, à medida que mais e mais desenvolvedores estão abandonando o suporte para o IE6, você não precisa pensar sobre isso, mas para aqueles preocupados com compatibilidade, aqui está uma pequena lista.

Empurre para baixo, é um sintoma de que um elemento dentro de uma caixa flutuante é mais largo do que essa caixa (isso geralmente acontece com imagens). A maioria dos navegadores exibirá a parte saliente do elemento flutuante, mas isso não afetará o layout. O IE vai expandir a caixa flutuante e geralmente tem um efeito drástico no layout. Um exemplo típico é uma imagem saindo do bloco de conteúdo principal, empurrando a barra lateral para baixo.

Resolução rápida de problemas: use estouro: oculto; para cortar o excesso.

Bug de margem dupla é outra coisa a se ter em mente ao trabalhar com o IE6. Este bug é expresso no fato de que se o campo está do mesmo lado onde está orientado flutuador, o campo é duplicado. Por exemplo:

Conseguimos a margem esquerda em 40 px., ao invés de 20 px.

Resolução rápida de problemas: set display: inline para o bloco flutuante, e não se preocupe, o elemento permanecerá baseado em bloco.

3 Pixel Jog (3px Jog)... A essência desse bug é que o texto localizado próximo ao elemento flutuante é estranhamente deslocado em três pixels, como se sob a influência do campo de força localizado ao redor do elemento flutuante. Resolução rápida de problemas: define a largura e altura do texto afetado.

IE7 aparece Bug de margem inferiorquando o pai está flutuando e seu pai também está flutuando. A margem inferior da criança é ignorada pelo elemento ancestral. Resolução rápida de problemas: Use padding-bottom no pai em vez do filho na margem inferior.

Todos os elementos que aparecem em uma página HTML nada mais são do que retângulos. E basicamente apenas dois tipos:

1. blocos (blok), que ocupam toda a largura onde estão, e estão separados do que está acima e abaixo deles. Por exemplo, são tags DIV, P, H.
2. embutido (embutido). Por exemplo, SPAN, STRONG, EM, A e IMG.

mesas.

A função da propriedade aumentou após a transição do layout da tabela para o layout div. Isso ocorre porque o float permite que um desenvolvedor da web inclua colunas sem recorrer a uma tabela. Pode assumir valores certo, esquerda, mas não centro.

Usando a propriedade display: block; ou exibir: embutido; vamos converter um tipo de retângulo em outro. Por exemplo, uma lista UL que tem uma série de LIs pode ser organizada horizontalmente:

• PARÁGRAFO
• PARÁGRAFO
• PARÁGRAFO

• PARÁGRAFO
• PARÁGRAFO
• PARÁGRAFO

Ao usar a propriedade float, o retângulo é em blocos, mas com uma característica especial: sua largura não abrangerá todo o conteúdo. Por exemplo, o cabeçalho h3 se parece com:

este é o HEADER h3

este é o HEADER h3

este é o HEADER h3

este é o HEADER h3

O texto superior permanece inalterado porque o elemento flutuante não pode ser posicionado acima da linha na qual foi criado.

este é o HEADER h3

Mas o texto em vermelho está abaixo do título e o envolverá sem nenhum estilo adicional. E apenas a altura h3 será superada, a página voltará à ordem natural.

A B C D Vários elementos flutuantes seguirão a seqüência de suas posições.

EBNODtexto...

A B C D Se caminharmos de forma que o fluxo ao redor do elemento seja interrompido a partir de um determinado momento (a partir daqui), a propriedade clara é aplicada. Podemos adicioná-lo a uma tag vazia

Para colocar vários retângulos de bloco uniformemente, atribua-lhes a mesma largura.

O layout da mesa é muito conveniente e compreensível, provavelmente por isso seu display analógico: table; apareceu. A mesma forma é obtida com menos código.

Agora você pode ver como a galeria de imagens é construída. espero que ninguém tenha esquecido.

texto...

texto...

Descrição

A propriedade CSS float permite que um elemento flutue deslocando-o para a esquerda ou direita do elemento pai, dependendo de qual valor é definido. Se nenhuma largura for explicitamente definida para um elemento flutuante, ele diminui sua largura para caber no conteúdo.

O navegador processa o código HTML do documento movendo-se de cima para baixo, quando o processamento do código atinge o elemento flutuante, o navegador o coloca primeiro de acordo com o fluxo do documento, ou seja, abaixo do elemento onde está localizado no código do documento, ele remove o elemento flutuante do fluxo normal e o desloca o máximo possível para a borda esquerda ou direita do elemento pai:

Como o elemento flutuante foi removido do fluxo do documento, o resto dos elementos do bloco localizados no código após ele são deslocados em seu lugar, como se esse elemento não estivesse lá.

Embora o elemento flutuante tenha sido removido do fluxo normal, o conteúdo embutido ainda é afetado. Ao contrário dos elementos de bloco, o conteúdo embutido localizado no código após o elemento flutuante leva em consideração suas bordas e flui ao redor dele, ou seja, o texto flui ao redor do bloco flutuante:

Em vez de um bloco flutuante com conteúdo de texto, você pode fazer uma imagem flutuante. Neste caso, o texto fluirá em torno da imagem:

Usando a propriedade float do CSS, a imagem foi flutuada no lado esquerdo. O texto localizado no código HTML abaixo da imagem fluirá ao redor da imagem nos lados direito e inferior.

Mais de um elemento flutuante pode ser colocado em uma linha se a largura do elemento pai permitir. Se o elemento pai não for largo o suficiente, os flutuadores que não se encaixam em linha com outros flutuadores serão empurrados para baixo.

Os elementos flutuantes não afetam a altura do pai, ou seja, se houver algum contêiner e apenas os elementos flutuantes estiverem nele, a altura do contêiner será zero. Você pode resolver esse problema das seguintes maneiras:

1. Defina uma altura fixa - nos casos em que se sabe qual deve ser a altura do recipiente.
2. Aplique a propriedade overflow com o valor auto ou hidden ao container, então os elementos flutuantes serão levados em consideração no cálculo da altura do container. Este método pode ser usado quando não se sabe com antecedência qual deve ser a altura do recipiente.

A propriedade float só funciona com elementos de bloco, portanto, se a propriedade float for aplicada a algum outro tipo de elemento, eles serão convertidos para o tipo de bloco.

Nota: Elementos posicionados absolutos e fixos ignoram a propriedade float. Além disso, a propriedade float não tem efeito em flexboxes.