Elementos flutuantes tutorial


Conforme observado anteriormente, os elementos de bloco ocupam toda a largura do espaço permitido (o elemento filho) e também começam com uma nova linha. Além disso, todos os elementos após o bloco também começam com uma nova linha no layout da página da web.

Se você corrigir a largura de um elemento usando a propriedade width , então é possível configurar o fluxo em torno deste elemento por outros. Esta propriedade tem o nome float , como parece que o elemento " плывет "no ambiente de outros elementos - à esquerda ou à direita. Assim, esta propriedade tem dois valores básicos - left ou right . Com o valor left o elemento é pressionado para o limite esquerdo, e o fluxo ao redor dos outros elementos ocorre ao longo da borda direita. Com o valor right - todo o caminho. Observe que você precisa definir a largura do elemento para fazer isso. Também float pode fazer a diferença none - está instalado por padrão.



Vemos que o texto fora do bloco está localizado à direita. Na ausência de uma regra float:left Este texto seria colocado sob o bloco - de acordo com as propriedades dos elementos do bloco.

Para cancelar o embrulho, basta inserir o elemento com a regra : ambos após o elemento com a regra float . Propriedade clear Racionalize a racionalização para os elementos indicados após ele. Significado both significa que qualquer racionalização - esquerda ou direita - será cancelada. Propriedade clear também pode tomar valores left ou right - cancelar o mesmo valor de propriedade float . Esta regra é freqüentemente usada para inserir uma linha vazia entre dois elementos flutuantes.



Propriedade float tem suas próprias características, o que pode levar a resultados inesperados. Um deles é a seguinte situação. Suponhamos colocar um bloco em outro, e o bloco interno tem uma regra float: left



Vemos que a unidade flutuante na verdade não segura o externo e ultrapassa os limites. Para corrigir este efeito, você precisa adicionar uma regra

overflow: hidden;


por bloco bar :

Проверьте свои знания
Crie regras de estilo para a classe de flores, sob a qual o elemento irá "nadar" para a direita. Crie as seguintes regras de estilo para a tag img dentro do bloco desta classe: altura 50px; recuo externo para 50px esquerdo. Usando o desenho ^ ^ insira um bloco de flor com uma imagem no cabeçalho para que seja pressionado para o limite esquerdo do cabeçalho. A etiqueta de padrão deve ser colocada em um bloco da classe de flores. Coloque o arquivo de imagem na pasta img na raiz do projeto. Crie uma etiqueta de formulário. Dentro do bloco de formulário de contato, antes do formulário, insira um cabeçalho com o texto do Formulário de Contato, a cor do texto # 403E3F.