Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Elementos con float:left se irán posicionando horizontalmente.
Es necesario indicar este estilo tanto a la capa sobre la que me apoyó como a la capa que se apoya.
Capas con float:left
<div style="background-color: red; width: 100px; height: 100px; float: left;"></div>
<div style="background-color: green; width: 100px; height: 100px; float: left;"></div>
<div style="background-color: blue; width: 100px; height: 100px; float: left;"></div>Capas con float:left dentro de otra capa
Cuando una capa contiene capas que utilizan el estilo float:left, el tamaño de estas capas no afectará al tamaño de la capa que las envuelve. Por eso en el ejemplo siguiente no se ve la capa rosa.
<div style="background-color: pink">
<div style="background-color: red; width: 100px; height: 100px;float: left;"></div>
<div style="background-color: green; width: 100px; height: 100px;float: left;"></div>
<div style="background-color: blue; width: 100px; height: 100px;float: left;"></div>
</div>Capas con float:left dentro de otra capa con overflow:hidden
Para que el tamaño de las capas internas afecten a la capa externa, debemos añadir el estilo overflow:hidden a la capa externa.
<div style="background-color: pink; overflow: hidden;">
<div style="background-color: red; width: 100px; height: 100px;float: left;"></div>
<div style="background-color: green; width: 100px; height: 100px;float: left;"></div>
<div style="background-color: blue; width: 100px; height: 100px;float: left;"></div>
</div>- Este posicionamiento hace que la capa contenedora de los div con float no crezca según estos van creciendo. Para solucionarlo, puedo poner overflow:auto u overflow:hidden a la capa contenedora.
- El estilo clear:right hace que cuando usas float no quepan elementos a la derecha. El estilo clear:both hace que no quepan a ambos lados.
Ejercicio float left
Modificar el ejercicio de la lección anterior para que funcione con float:left.