Limpando um flutuado corretamente

Question

Eu lido diretamente com float: left; e o CSS-reset de Eric Meyer com class="clearfix".Mas há um caso especial, eu me pergunto como limpar um elemento floatd corretamente: dentro de <ul> ... </ul>.

Altura incorreta do <ul> usando um clareador.O clearer deve estar dentro do <ul>.Vamos tentar ...

Altura correta, mas o código HTML não é válido !

<✓ Como posso limpar o float dentro do <ul> com um código válido?

Obrigado, Johannes

Answer 1

Basta adicionar overflow: hidden ao conjunto de regras do elemento ul.Pesquise por 'clearing floats' no Google ou Stack Overflow para outras soluções, embora neste caso esta deva ser a mais limpa.

demonstração do jsfiddle: http://jsfiddle.net/9sxrN/1/

Answer 2

Pelo que entendi, float pode ser aplicado a elementos de bloco, que não podem ser inseridos em UL.(nem div, nem BR você não pode inserir em UL).Na verdade, você pode, mas não é válido.

Então, cobri seu ul com o contêiner div:

<div class="ul-container">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<br style="clear:both">
</div>
<b>The height of the ul-tag is ok, but the code is not valid!</b>

e css de ul feito css de .ul-container

.ul-container {
    border: 2px solid red;
}

ul li {
    float:left;
    background: #ccc;
    margin: 5px;
}

Answer 3

Use overflow:hidden; no ul