Ajuda na construção do float


(Veteranokuno) #1

Estou tentando entender melhor o float, preciso criar 5 div com dimensões quaisqueres cada div possuira uma cor e estarão alinhadas. Embaixo delas será criado + 5 divs com as mesmas propriedades só que a ordem das cores será inversa e tenho que fazer isso utilizando float.

Consegui fazer apenas delimitando um container pai que terá exatamente o tamanho das largura das 5 primeiras divs, acredito que há outro jeito de fazer, contudo toda vez que uso o

float: left | clear: left; | float: right
esse float right inicia do outro lado da pagina
` * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    .container {
        width: 250px;
        height: 100px;
    }
    
    div div {
        width: 50px;
        height: 50px;
    }
    
    .esq {
        float: left;
    }
    
    .dir {
        clear: left;
        float: right;
    }
    
    .ver {
        background-color: red;
    }
    
    .azl {
        background-color: blue;
    }
    
    .vrd {
        background-color: lightgreen;
    }
    
    .ama {
        background-color: yellow;
    }
    
    .pre {
        background-color: black;
    }

<!-- Exemplo 1 -->
<div class="container">
    <div class="esq ver"></div>
    <div class="esq azl"></div>
    <div class="esq vrd"></div>
    <div class="esq ama"></div>
    <div class="esq pre"></div>

    <div class="dir ver"></div>
    <div class="dir azl"></div>
    <div class="dir vrd"></div>
    <div class="dir ama"></div>
    <div class="dir pre"></div>
</div>`