Por que 'clear: left' também limpa certo?

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

  •  10-07-2019
  •  | 
  •  

Pergunta

Eu estive lutando para obter CSS flutuante para o trabalho (na minha cabeça).

Observe o exemplo a seguir: 

<style type="text/css">
    div.container {
        width:500px;
    }
    div.left {
        float:left;
        clear:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="left">leftdata 1</div>
    <div class="left">leftdata 2</div>
    <div class="right">rightdata 1</div>
    <div class="right">rightdata 2</div>
    <div class="right">rightdata 3</div>
    <div class="right">rightdata 4</div>
</div>

Isto vai dar o seguinte resultado: 

+--------------------------------------------------------------------+
| leftdata 1                                                         |
| leftdata 2         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
|                                                                    |
+--------------------------------------------------------------------+

No entanto, eu estava esperando isso: 

+--------------------------------------------------------------------+
| leftdata 1         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
| leftdata 2                                                         |
|                                                                    |
+--------------------------------------------------------------------+

Por que é clara: left; Também limpar certo?

Meu objetivo:

Eu quero apenas para adicionar um claro: right; para os DIVs marcados com classe: direita. Isso deve produzir o seguinte: 

<style type="text/css">
    div.left {float:left;clear:left;}
    div.right {float:right;clear:right;}
</style>

+--------------------------------------------------------------------+
| leftdata 1                                             rightdata 1 |
| leftdata 2                                             rightdata 2 |
|                                                        rightdata 3 |
|                                                        rightdata 4 |
+--------------------------------------------------------------------+
Foi útil?

Solução 

<style type="text/css">
    div.left {float:left;}
    div.right {float:right;}
    br.clear{clear:both;}
</style>

<div class="container">
    <div class="left">
         <div> data 1 </div>
         <div> data 2 </div>
         <div> data 3 </div>
    </div>
    <div class="right">
         <div> right data 1 </div>
         <div> right data 2 </div>
         <div> right data 3 </div>
    </div>
    <br class="clear" />
</div>

Outras dicas

Em seu primeiro exemplo os rightdata-divs são colocados sob os que foram deixados porque eles aparecem mais tarde no documento. Coloque-os em primeiro lugar e você obter os resultados esperados.

Ou você pode tentar algo ao longo das linhas de: 

<style type="text/css">
  div.left {
    float: left;
  }

  div.right {
    float: right;

  }
  div.container {
    width:500px;
    overflow: auto; /* to make sure .container expands vertically */
  }


<div class="container">
  <div class="left">
    <div>leftdata 1</div>
    <div>leftdata 2</div>
  </div>
  <div class="right">
    <div>rightdata 1</div>
    <div>rightdata 2</div>
    <div>rightdata 3</div>
    <div>rightdata 4</div>
  </div>
</div>

Em CSS, por algum motivo estúpido, não importa que ordem você coloca os divs flutuou. Se você colocar o

queridos no primeiro (em vez de colocar os que foram deixados em primeiro), então não não será essa nova linha extra na direita.

Outra coisa: eu não acho que qualquer deve nunca comando uso de css clara. Por quê? Uma vez que pode ser afectada por outros elementos flutuantes circundantes. Em outras palavras, claro:. Tanto não apenas um espaço claro para elementos flutuavam no elemento currrent, ele limpa espaço para todas elemento flutuado na página

A melhor solução é usar overflow: auto;

Heres algum código que accommplishes o que você quer: 


<style type="text/css">
    div.container {
        width:500px;
        overflow:auto;
    }
    div.left {
        float:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="right">rightdata 1</div>
    <div class="left">leftdata 1</div>
    <br>
    <div class="right">rightdata 2</div>
    <div class="left">leftdata 2</div>
    <br>
    <div class="right">rightdata 3</div>
    <br>
    <div class="right">rightdata 4</div>
</div>

Edit: Na verdade, nota que, nesta situação, nem clara, nem overflow: auto são estritamente neccessary para produzir a configuração do leftdata / rightdata divs, mas são neccessary se você deseja que o recipiente div expandir-se para a altura dos divs. Sem clara ou overflow: auto, a altura da div não irá expandir para acomodar a altura de divs flutuou ele contém

.

Eu acho que sua melhor aposta é para fazer algo como: 

+--------------------------------------------------------------------+
|+------------+                                       +-------------+|
|| leftdata 1 |                                       | rightdata 1 ||
|| leftdata 2 |                                       | rightdata 2 ||
|+------------+                                       | rightdata 3 ||
|                                                     | rightdata 4 ||
|                                                     +-------------+|
+--------------------------------------------------------------------+

EDIT: como o código que john misoskian postou ^^

Para responder você pergunta, 

clear:left

é clearing esquerda. Se você tem um float: left , clear: left limpa-lo. Concordo com todos os outros em que float: left e float: right só são realmente não vai chegar a uma coluna de formatação

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