Tema: No entiendo float+clear¡
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/06/2013, 03:06
Avatar de Iballa
Iballa
 
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años, 10 meses
Puntos: 6
No entiendo float+clear¡
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
  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.  
  5.         img {
  6.             float: left;
  7.         }
  8.         #xxxx {
  9.          border: 1px solid black;
  10.          width: 400px;
  11.         }
  12.         #bbbb {
  13.          border: 1px solid black;
  14.          width: 400px;
  15.         }
  16.  
  17.       #contenedor { background: pink;}
  18.     </style>
  19. </head>
  20. <body>
  21.   <div id="contenedor">
  22.    <img src="imagen_flores_1.png">
  23.    <p id="xxxx">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  24.    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  25.    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  26.    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  27.    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  28.    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  29.    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  30.    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  31.    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  32.    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  33.    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  34.    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  35.    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  36.    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  37.    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  38.    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  39.    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  40.    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  41.    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  42.    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  43.    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  44.    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  45.    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  46.    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  47.    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  48.    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  49.    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  50.    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  51.    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  52.    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  53.    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  54.    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  55.    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  56.    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  57.    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  58.    proident, sunt in culpa qui off
  59.    </p>
  60.    <p id="bbbb">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  61.    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  62.    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  63.    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  64.    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  65.    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  66.    </div>
  67. </body>
  68. </html>