Lógica flutuante CSS
Eu criei 25 caixas de largura e altura aleatórias, ondewidth == height (como mostrado)
$(document).ready(function(e) {
for (var count = 0; count < 5; count++) {
for (var iter = 0; iter < 5; iter++) {
$(".content").append("<div id='" + count + "_" + iter + "' class='box'><p>" + count + "_" + iter + "</p></div>");
$(".content div:last").width(Math.round((Math.random() * 100) + 50));
$(".content div:last").height($(".content div:last").width());
}
}
});.box {
background: #FF0004;
margin: 10px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="content">
</div>
</body>Estou tentando entender melhor a lógica da propriedade float e o raciocínio por trás do posicionamento dos elementos flutuantes quando eles se "empilham". por exemplo (capturas de tela tiradas do violino):
O que faz com que 3_3 se desloque para a posição como mostrado abaixo quando a tela é aumentada?
De acordo com o W3Schools:
Se você colocar vários elementos flutuantes um após o outro, eles flutuarão um ao lado do outro, se houversala.
Então a questão é: o que "sala"mean e qual é a lógica que governa a localização dos elementos flutuantes?
A resposta para este post SO:Explicação do CSS Float parece relevante, no entanto, não parece explicar por que um elemento flutuante para em um determinado local.