Como Float um parágrafo para HTML5 e CSS3 Programação

Parágrafos e outros elementos de bloco tem um comportamento padrão bem definido na CSS3. Eles tomam toda a largura da página, e o próximo elemento aparece abaixo. Quando você aplica o elemento a um parágrafo, o comportamento desse número não muda muito, mas o comportamento de sucedendo parágrafos é alterada.

Começar por olhar para uma página com três parágrafos. O n.º 2 tem a sua flutuador propriedade definida como esquerda.

image0.jpg

Como você pode ver, alguma formatação estranha está acontecendo aqui. Dê uma olhada no que está acontecendo:

  • Fronteiras foram adicionados aos parágrafos. Como você verá, a largura de um elemento não é sempre óbvio, olhando para o seu conteúdo. Quando você está brincando com flutuador, pode ser sábio para adicionar bordas dos números para que você possa ver o que está acontecendo. Você sempre pode remover as bordas quando você tem que trabalhar direito.

  • O primeiro parágrafo funciona normalmente. O primeiro parágrafo tem o mesmo comportamento que você vê em todos os elementos de estilo bloco. Leva toda a largura da página, e o elemento seguinte será colocado por baixo.

  • O segundo parágrafo é bastante normal. O segundo parágrafo tem a sua flutuador atributo definido como esquerda. Isto significa que o número será colocada na sua posição normal, mas que o outro texto serão colocados à direita deste elemento.

  • O terceiro parágrafo parece magro. O terceiro parágrafo parece cercar o segundo, mas o texto é empurrado para a direita. o flutuador parâmetro no parágrafo anterior faz com que esta para ser colocado em qualquer espaço restante (que atualmente não é muito). O espaço restante é à direita e, eventualmente, por baixo do segundo parágrafo.

O código para produzir este é HTML simples com igualmente simples marcação CSS:

floatDemo

flutuar Demonstração

Parágrafo 1. Este parágrafo tem o comportamento normal de um nível de bloco element.It ocupa toda a largura da página, e no próximo Elementis colocado por baixo.

§ 2. Este parágrafo é flutuou esquerda. Ele é colocado à esquerda, e thenext elemento será colocado à direita dele.

§ 3.O parágrafo não tem flutuante, largura ou margem. É preciso whateverspace que puder para a direita do elemento flutuado, e depois flowsto a próxima linha.

Como você pode ver a partir do código, há uma classe simples chamada flutuou com o flutuador propriedade definida como esquerda. Os parágrafos são definidos na forma ordinária. Mesmo que no 2 parece ser incorporado dentro nº 3 na captura de tela, o código mostra claramente que este não é o caso. Os dois parágrafos são completamente distintos.

menu