El efecto de esta propiedad es bastante simple
pero resulta muy útil para que el diseño de la página se
adapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento
del flujo normal de la página y colocarlo a la izquierda o derecha del
resto del contenido de su elemento padre (se lo hace "flotar" hacia
uno u otro costado).
En este ejemplo, el título tiene float:none y mantiene su
posición normal.
El efecto de esta propiedad es bastante simple pero resulta
muy útil para que el diseño de la página se adapte al monitor
del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal
de la página y colocarlo a la izquierda o derecha del resto del contenido
de su elemento padre (se lo hace "flotar" hacia uno u otro costado).
En este ejemplo, el título tiene float:left y se coloca
a la izquierda de este párrafo.
El efecto de esta propiedad es bastante simple pero resulta
muy útil para que el diseño de la página se adapte al monitor
del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal
de la página y colocarlo a la izquierda o derecha del resto del contenido
de su elemento padre (se lo hace "flotar" hacia uno u otro costado).
En este ejemplo, el título tiene float:right y se coloca
a la derecha de este párrafo.
Esta propiedad complementa a la anterior. Con clear
se especifica que un elemento no admite un flotante sobre su izquierda,
sobre su derecha o a ambos lados. También se la puede usar en un elemento
flotante para impedir que otros flotantes puedan quedar sobre algunos de sus
costados.
Veamos este ejemplo: el DIV con la imagen de la flecha tiene
la propiedad float:left, de modo que se ubicará a la izquierda
de este párrafo.
Ahora, el DIV con la imagen de la flecha
tiene la propiedad float:left pero este párrafo tiene clear:left,
de modo que no admite un elemento flotante a su izquierda. El resultado es que
la imagen se ubica por encima del párrafo.
Ahora tenemos dos elementos DIV con dos imágenes, ambos
tienen la propiedad float:left. El efecto es que ambas se ubican
a la izquierda de este párrafo. Debido a las reglas para los flotantes,
primero se ubica la flecha sobre la izquierda y luego la mancha (que también
flota a la izquierda) se ubica sobre su derecha.
Se repite el caso anterior, pero ahora el DIV con la imagen
azul tiene la propiedad clear:left, de modo que no admite a otro
flotante sobre su izquierda. El resultado es que ambas imágenes quedan
sobre la izquierda de este párrafo, pero esta vez una imagen encima de
la otra.