A melhor maneira de “clear: both” [fechado]

StackOverflow https://stackoverflow.com/questions/1237813

  •  11-09-2019
  •  | 
  •  

Pergunta

Por muito tempo agora, eu tenho usado uma classe CSS chamada clear, que só tem o clear: both regra. Eu usá-lo da seguinte forma (mostrado na Django-sintaxe, mas é sem importância): 

{% for item in collection %}
  <ul class="horiz"><!-- horizontal list -->
    <li>{{ item }}</li>
    <li>{{ item }}</li>
  </ul>
  <div class="clear"></div>
{% endfor %}

Como você pode ver, eu estou fazendo um monte de listas horizontais, para torná-la apenas como uma mesa. Imagine que o .horiz li regra CSS implica float: left. Note que estou usando <div class="clear"></div> após cada linha nesta "mesa", um monte de HTML para algo tão simples.

Esta é realmente o caminho a percorrer? Não há nada mais simples que eu simplesmente não ter pensado sobre?

Foi útil?

Solução

Existe uma razão que você não pode usar ... 

<ul class="horiz clear">

... para cada lista, exceto o primeiro?

Outras dicas

Não há maneira de fazê-lo em CSS

http://www.positioniseverything.net/easyclearing.html 

    #pages ul li {
        display: block;
        float: left;
        .......
    }


    #pages ul:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

Se você quiser cada uma das listas para mostrar o que há neles, sem ter que adicionar uma marca de enchimento DIV, você pode ajustar a propriedade overflow da lista com o seguinte: 

.horiz
{
   overflow:hidden;
}

Agora, mesmo que a lista-artigos eles mesmos estão flutuando, o conteúdo da lista deve mostrar sem entrar em colapso a área como eles talvez fazer agora, porque eles são deslocados para fora do fluxo.

Você pode ter seu ul com overflow: hidden;. Isto estabelece um novo bloco formatação contexto para cada ul que é exatamente o que você quer.

Eu costumava clear: both; como você, mas uma vez eu descobri este pequeno truque estranho, eu comecei usando este quase que exclusivamente. Parece semanticamente superior e funciona em 99% dos casos.

Por que não dar o seu UL e seus LI fixo largura, onde a largura da UL é pelo menos duas vezes a largura da LI, mas menos do que 3 vezes a largura de um LI.

Então você pode colocar todo o seu LI de em um UL e colocar um float: left na LI.

Isto fará com que cada item da lista para aparecer ao lado do outro, mas eles vão quebrar na seguinte linha quando eles correm para fora da sala (devido à largura da UL).

Outro conselho. Você pode usar clara: tanto na tag "pausa (<br/>)". Não há necessidade de código na div. Veja a seguir

Codificação em CSS: 

.clear {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Usando é HTML:

<br class="clear" />

Tente !!!

A solução mais óbvia é mover o clear: both para o próximo elemento em seu layout. Se este ul está sendo seguido por um div, dar esse div um class="clear", etc.

Coloque a clara sobre o ul.

Eu estou de acordo com Logesh Paul, É mais simples tornam-se usar br vez de div.

Mas acho que você deve colocar o elemento claro fora do looping.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top