Como limpar carros alegóricos para a correcta colocação de rodapé

A maioria dos usuários novatos CSS nunca ter sequer ouvido falar de "limpar" a propriedade. Sei que no passado, eu não tinha, e montado o meu cérebro durante horas a tentar apanhar o meu layout para exibir corretamente com uma barra lateral flutuante. É assim que funciona:

Ao tornar divs, os navegadores fluxo normal é um lugar para, em seguida, depois de o fluxo normal das coisas, colocar a próxima. Quando você quiser ter divs lado a lado, a habitual solução é adicionar o "float" propriedade para eles. No que se seguidamente, tanto a "esquerda-nav" div e ao "conteúdo" div têm a propriedade "float: left;". Poderemos então colocar o conteúdo dentro divs flutuantes, e têm um esquema contente. O problema é que não há nada no fluxo normal das coisas a continuar o esquema, por isso temos que dizer ao browser para empurrar as coisas. Nota: estes dois exemplos:

Incorreto:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 
  </ div> 
  <div id = "footer"> <p> Todo este texto está escondido sob a flutuaram divs!! </ div> 

Correto:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 

  <div style="clear: both;"> <! - flutue claramente --></ div> 

  </ div> 
  <div id = "footer"> <p> Minha rodapé agora exibe o flutuaram elementos abaixo!! </ div> 

Que narra um pouco a linha de navegador "andando", e move-se o fluxo para baixo. A forma mais fácil de testar esta é a dar "invólucro" uma cor de fundo, e olhar para a diferença das duas peças código quando há conteúdo de cada elemento.

Alta tecnologia web 2.0 interactivo exemplos:

Exemplo 1 (incorreta):

  +--(# wrapper )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  +---| |----| |---+ 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | # Nav-esquerdo | | # conteúdo | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      +-----------+ +--------------------+ 

Exemplo 2 (Correto):

  +--(# wrapper )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | # Nav-esquerdo | | # conteúdo | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | +-----------+ +--------------------+ | 
  | | 
  | + --- Clara: tanto ----------------------- + | 
  | | 
 +---------------------------------------------+ 

Stumble it!

Post Info

Esta entrada foi postada na segunda-feira, 31 de dezembro de 2007 e é arquivada sob css, design. Ela tem 200 visualizações

Tags: css, hacks, dicas

Comentários Feed. | Deixe comentário | Deixe Trackback.

Anteriores Postar: Adicionar código do Google Analytics para o site inteiro em um flash »
Próximo Post: AJAX formulário Contato »

Mais vistos lugares