Como usar o mecanismo de layout flutuante para HTML5 e CSS3 Programação

CSS3 fornece uma técnica par de layout. A técnica preferida para a maioria das aplicações é uma disposição flutuante.

A idéia básica desta técnica é deixar o layout HTML tão simples quanto possível, mas para fornecer dicas de estilo que contam os vários elementos como interagir uns com os outros na tela.

Em um layout flutuante, você não legislar exatamente onde tudo vai. Em vez disso, você fornecer dicas e deixar o navegador gerir as coisas para você. Isso garante flexibilidade, porque o navegador irá tentar seguir as suas intenções, não importa o tamanho ou forma janela do navegador se torna. Se o usuário redimensionar o navegador, a página será flex para ajustar ao novo tamanho e forma, se possível.

layouts flutuantes normalmente envolvem menos código do que outros tipos de layouts, porque apenas alguns elementos precisam CSS especializada. Na maioria das outras técnicas de layout, você precisa fornecer CSS para cada elemento para fazer as coisas funcionam conforme o esperado.

Como usar o flutuador com imagens

O local mais comum para usar o flutuador atributo é com imagens.

É mais provável que você deseja que a imagem para ocupar toda a parte esquerda do parágrafo. O texto deve fluir em torno do parágrafo,

Quando você adiciona um float: left atribuir ao img elemento, a imagem tende a mover-se para a esquerda, empurrando outros conteúdos para a direita. Agora, o texto flui ao redor da imagem. A imagem é realmente removido do fluxo normal do layout da página, de modo que o número ocupa todo o espaço. Dentro do parágrafo, o texto evita sobreposição da imagem.

Como adicionar a propriedade flutuador

O código para adicionar o flutuador propriedade é bastante simples:

A imagem agora tem seu atributo flutuador definido para a esquerda. Isso meansthat o texto irá fluir ao redor da imagem como normalmente doesin uma imagem de magazine.The agora tem seu atributo flutuador definido para a esquerda. Isso meansthat o texto irá fluir ao redor da imagem como normalmente doesin uma imagem de magazine.The agora tem seu atributo flutuador definido para a esquerda. Isso meansthat o texto irá fluir ao redor da imagem como normalmente doesin uma imagem de magazine.The agora tem seu atributo flutuador definido para a esquerda. Isso meansthat o texto irá fluir ao redor da imagem como normalmente doesin uma imagem de magazine.The agora tem seu atributo flutuador definido para a esquerda. Isso meansthat o texto irá fluir ao redor da imagem como normalmente doesin uma revista.

O único elemento novo no código é o CSS flutuador atributo. O objeto tem um float: left atributo. Não é necessário alterar quaisquer outros atributos do parágrafo porque o texto do parágrafo sabe a flutuar à volta da imagem.

Claro, você não tem que flutuar simplesmente para a esquerda.