Use o atributo clear de css para obter o efeito de quebra automática do texto do anúncio

Você já viu que os anúncios de sites grandes são colocados no meio do conteúdo para quebrar o texto. Geralmente, os anúncios de sites pequenos comuns só podem ser colocados no início ou no final do conteúdo. Talvez o sistema cms de sites grandes tenha. esta função. Os princípios básicos do cms comumente usados ​​​​por nossos pequenos sites Não existe tal função, porque é impossível adicionar automaticamente uma tag de publicidade à tag de conteúdo, a menos que você a edite manualmente ao adicionar um artigo, o que não é cansativo.

Nunca pensei em usar css para controlá-lo, principalmente porque não esperava o atributo clear. Vi acidentalmente uma introdução hoje e percebi que é muito simples implementar a quebra automática de texto.

Exemplo de código:

<div class="notícias">
<div style="float:left;height:300px;width:0">Uma camada em branco com largura 0, usando a altura desta camada para controlar as posições superior e inferior da camada de publicidade</div>
<div style="float:left;height:250px;width:250px;clear:left;">Código de publicidade</div>
</div>

A chave está na função de clear:left. Clear tem três atributos: clear:both, clear:left e clear:right, que indicam respectivamente a limpeza dos blocos flutuantes em ambos os lados, esquerdo e direito. Adicionar clear:left à camada de publicidade significa que a camada não flutuará mais em relação à camada em branco e se moverá para baixo. É ótimo, haha.

Vamos comparar:

<div class="notícias">
<div style="float:left;height:300px;width:100px;background:#CCC;">Adicione largura e fundo para facilitar a observação do efeito</div>
<div style="float:left;height:250px;width:250px;">Se você remover o float claro, entenderá seu significado</div>
</div>

Se você adicionar este:

<style>.news img,.news table{clear:both;}</style> //Deixe que as imagens e tabelas do conteúdo não cubram os anúncios

Infelizmente, o teste acima descobriu que apenas o IE é viável. O Firefox e o Opera têm resultados diferentes. O efeito do IE é que a imagem desce automaticamente ao encontrar a camada de publicidade. porque a camada publicitária fica na frente. Na ópera, a imagem não desce e cobre a camada publicitária.

Melhorado novamente:

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //Permite que imagens e tabelas fiquem automaticamente na parte inferior

Finalmente está pronto, está perfeito e o efeito do conteúdo publicitário circundante está completo :)

//2008-02-29, modificado por: O que é

Esqueci de adicionar

Alguém perguntou se o texto deveria ser quebrado na parte superior e inferior direita, então alterei da seguinte forma: