Ajuda Flutuante em HTML

Ao criar páginas da Web para sua empresa usando código HTML e CSS simples, você pode usar CSS para estilizar e formatar "divisões" específicas em seu conteúdo - definido em seu código HTML - que permite formatar textos e imagens de tal maneira que eles "envolvam-se" ou se conformam uns com os outros. Em outras palavras, partes de seu conteúdo podem se ajustar a outras seções, organizadas de tal maneira que as imagens e o texto possam se encaixar como colunas, grades ou qualquer outro alinhamento especificado.

HTML e CSS

Embora o HTML apresente uma meta-linguagem marcada que defina como uma página da Web aparecerá em um navegador da Web, o poder real do Web design ocorre quando você mistura HTML com folhas de estilo em cascata. CSS define comportamentos para elementos incorporados em arquivos HTML, criando um layout universal para a página. Vários documentos HTML podem se referir à mesma página CSS, o que significa que você pode impor uma aparência regular em todas as suas páginas.

Divisões HTML e Flutuante

CSS trabalha com HTML, definindo o comportamento de tags HTML. Especificamente, o CSS tira proveito das tags "". Essas tags de divisão cercam uma parte do documento e a identificam como uma unidade discreta de informações que deve ter o mesmo estilo. Essas divisões também funcionam como "caixas" de tipos, pois através de CSS você pode ter seções de conteúdo mudando de cor, alterar tamanho ou "flutuar" para um limite de página específico para que o redimensionamento da página não estrague o layout.

Flutuando em CSS e HTML

Para usar o atributo "float", você cria uma divisão em seu conteúdo ou se refere a uma imagem. Em seu documento CSS, você faz referência a div ou imagem por nome e atribui a ele um atributo flutuante. O exemplo de código a seguir mostra como fazer isso com uma folha de estilos interna. Observe que a divisão no HTML, denominada "section1", tem uma largura de 100 pixels. Todas as divisões usando float requerem uma largura especificada. Imagens já possuem uma largura implícita:

Aqui está algum conteúdo dentro de uma divisão

Claro, margens e preenchimento

Juntamente com os fundamentos do uso do atributo float, você também pode empregar outros itens, como os atributos clear, margin e padding. O atributo clear garante que nenhum outro conteúdo apareça na mesma linha que o elemento flutuante. Margens controlam o espaço em torno dos espaços esquerdo e inferior da divisão. O preenchimento controla o espaço interno na divisão entre o conteúdo e as bordas da divisão. Esses três itens juntos podem criar divisões limpas, "em forma de caixa" que permitem ou não permitem que textos e outras imagens sejam agrupadas.