¿Por qué 'clear: left' también se borra a la derecha?

Question

He estado luchando para que CSS flotara para funcionar (en mi cabeza).

Tenga en cuenta el siguiente ejemplo:

<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>

Esto dará el siguiente resultado:

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

Sin embargo, esperaba esto:

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

Por qué está claro: izquierda; también claro, ¿no?

---

Mi objetivo:

Solo quiero agregar un clear: right; a los DIV marcados con clase: derecha. Esto debería producir lo siguiente:

<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 |
+--------------------------------------------------------------------+

Answer 1

<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>

Answer 2

En su primer ejemplo, los rightdata-divs se colocan debajo de los izquierdos porque aparecen más adelante en el documento. Colóquelos primero y obtendrá los resultados esperados.

O podrías probar algo como:

<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>

Answer 3

En CSS, por alguna estúpida razón, importa en qué orden pones los divs flotantes. Si pones < div class = " right " > los de PRIMERO (en lugar de poner los de la izquierda primero), entonces no habrá esa nueva línea adicional a la derecha.

Otra cosa: no creo que nadie deba nunca usar el comando clear de css. ¿Por qué? Porque puede verse afectado por otros elementos flotantes circundantes. En otras palabras, claro: ambos no solo liberan espacio para elementos flotantes en el elemento actual, sino que también liberan espacio para cada elemento flotante en la página.

La mejor solución es usar overflow: auto;

Aquí hay un código que incluye lo que quieres:

<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>

Editar: en realidad, tenga en cuenta que en esta situación, ni clear ni overflow: auto son estrictamente necesarios para producir la configuración de los divisores leftdata / rightdata, pero son necesarios si desea el contenedor div para expandir a la altura de los divs. Sin clear o overflow: auto, la altura del div no se expandirá para acomodar la altura de los div flotantes que contiene.

Answer 4

Creo que su mejor opción es hacer algo como:

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

EDITAR: como el código que publicó John Misoskian ^^

Answer 5

Para responder a su pregunta,

clear:left

está despejando a la izquierda. Si tiene un float: left , clear: left lo borra. Estoy de acuerdo con todos los demás en que float: left y float: right por sí solos no van a obtener un formato de columna.