float:left en CSS

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

30.  
31.  
34.  
37.  
50.  

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.

← display:block, inline, inline-block
Ejercicio de maquetación con display →