[SOLUCIONADO] No entiendo float+clear¡

Iballa · #1 (**permalink**) 04/06/2013, 03:06

La verdad es que quiero entender bien el comportamiento de los elementos, pero hay algunos que no pillo el por qué. Por ejemplo float.

No entiendo por ejemplo este comportamiento, se supone que hay que darle "clear" para que el siguiente elemento ya no se amontone al lado del otro. El primer elemento, la foto, flota a la izquierda, deja el hueco, y el siguiente elemento id=xxxx
ocupa el espacio vacio. Y ahora como no se le ha dado clear todavia, se supone que el id=bbbb también se tiene que amontonar a la derecha no?, pero se comporta como si no existiera el float, como si se le hubiera dado clear, pero yo no le he dado clear. ¿alguien sabe por que? lo siento el rollo pero entonces para que sirve clear? si ya de por si mismo el tercer elemento se comporta con el flujo normal...

Código HTML:

Ver original<html>
<head>
    <style type="text/css">
 
        img {
            float: left;
        }
        #xxxx {
         border: 1px solid black;
         width: 400px;
        }
        #bbbb {
         border: 1px solid black;
         width: 400px;
        }
 
      #contenedor { background: pink;}
    </style>
</head>
<body>
  <div id="contenedor">
   <img src="imagen_flores_1.png">
   <p id="xxxx">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui off
   </p>
   <p id="bbbb">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
</body>
</html>

pzin · #2 (**permalink**) 04/06/2013, 03:48

Los floats afectan al siguiente elemento, no a todos los que siguen.

Iballa · #3 (**permalink**) 04/06/2013, 04:45

Cita:

Iniciado por pzin

Los floats afectan al siguiente elemento, no a todos los que siguen.

Entonces ¿para qué sirve clear?

pzin · #4 (**permalink**) 04/06/2013, 05:47

Para limpiar el flotado y que no afecte al siguiente elemento.*

En tu caso el flotado de la imagen afecta al siguiente elemento, y ese párrafo se pone al lado. Pero como dicho párrafo no está flotado, no va a afectar nada al siguiente.

* corregido

Iballa · #5 (**permalink**) 04/06/2013, 05:57

Cita:

Iniciado por pzin

Para limpiar el flotado y que no afecte al siguiente elemento.

En tu caso el flotado de la imagen afecta al siguiente elemento, y ese párrafo se pone al lado. Pero como dicho párrafo no está flotado, no va a afectar nada al siguiente.

Perdoname, no lo entiendo, si yo pongo float a un elemento es para que afecte al siguiente elemento, tal y como has dicho. Es una contradicción si pongo float para que afecte al siguiente elemento, y después clear para que no lo afecte...

pzin · #6 (**permalink**) 04/06/2013, 06:05

No es una contradicción. Es que tampoco es tan así. O si.

El float afecta al elemento que le inidicas además de al siguiente casi siempre. No he dicho que sólo afecte al siguiente, o me refería a que no afecta "además" a todos los que siguen sino sólo al siguiente.

En tu caso no usas ningún clear. Pero el que se vaya hacia abajo el segundo párrafo es debido a que el primero no está flotado como la imagen. Flótalo para que veas que, si hay sitio suficiente, el segundo párrafo se pondrá al lado:

Código CSS:

Ver original#xxxx {
  float: left;
}

Iballa · #7 (**permalink**) 04/06/2013, 08:56

Cita:

Iniciado por pzin

No es una contradicción. Es que tampoco es tan así. O si.

El float afecta al elemento que le inidicas además de al siguiente casi siempre. No he dicho que sólo afecte al siguiente, o me refería a que no afecta "además" a todos los que siguen sino sólo al siguiente.

En tu caso no usas ningún clear. Pero el que se vaya hacia abajo el segundo párrafo es debido a que el primero no está flotado como la imagen. Flótalo para que veas que, si hay sitio suficiente, el segundo párrafo se pondrá al lado:

Código CSS:

Ver original#xxxx {
  float: left;
}

Hola de nuevo, si, eso lo entiendo perfectamente, lo que no entiendo es que pinta clear. (no me mates)

pzin · #8 (**permalink**) 04/06/2013, 09:35

Uhmm...

Lo que hace clear es que limpia el flotado, entonces dicho elemento se moverá hasta el punto donde el flotado "termina", esos límites son más bien algo abstracto y supongo que eso es lo difícil de entender. O yo me explico mal.

No sé, es más difícil de explicar que de entender.

Edito:

Cita:

Iniciado por pzin

Para limpiar el flotado y que no afecte al siguiente elemento.

Esto está mal. Debería de ser "para limpiar el flotado y que no sea afectado por el flotado del elemento anterior".

Iballa · #9 (**permalink**) 05/06/2013, 02:57

Cita:

Iniciado por pzin

Uhmm...

Lo que hace clear es que limpia el flotado, entonces dicho elemento se moverá hasta el punto donde el flotado "termina", esos límites son más bien algo abstracto y supongo que eso es lo difícil de entender. O yo me explico mal.

No sé, es más difícil de explicar que de entender.

Edito:

Esto está mal. Debería de ser "para limpiar el flotado y que no sea afectado por el flotado del elemento anterior".

Gracias pzin, saludos¡