CSS Float Logic

Ho creato 25 scatole di larghezza e altezza casuali, dove width == height (come mostrato)

 $(document).ready(function(e) { for (var count = 0; count < 5; count++) { for (var iter = 0; iter < 5; iter++) { $(".content").append(""); $(".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; } 
   

Sto cercando di capire meglio la logica della proprietà float e il ragionamento alla base del posizionamento degli elementi mobili quando si “impilano” l’uno sull’altro. per esempio (screenshot presi dal violino):

inserisci la descrizione dell'immagine qui

Cosa fa spostare 3_3 nella posizione mostrata sotto quando lo schermo è ingrandito? inserisci la descrizione dell'immagine qui

Secondo W3Schools:

Se posizioni diversi elementi fluttuanti l’uno dopo l’altro, questi galleggiano l’uno accanto all’altro se c’è spazio .

Quindi la domanda è: cosa significa ” stanza ” e qual è la logica che governa la posizione degli elementi fluttuanti?

La risposta a questo post SO: la spiegazione del float CSS appare pertinente, tuttavia non sembra spiegare perché un elemento flottato si ferma in una certa posizione.

Ecco la parte della risposta collegata più pertinente alla tua domanda:

Quando si fa galleggiare un elemento di blocco, si sta dicendo al browser di posizionarlo accanto al precedente object flottato, a condizione che il contenitore sia sufficientemente largo (altrimenti scenderà al di sotto dell’object precedente).

Come dice l’autore, questa è una semplificazione cruda. La sezione 9.5.1 delle specifiche ha una lista di tutte le regole precise, ma non ho intenzione di citare l’intera cosa qui perché è una lettura molto lunga e solo alcuni punti sono rilevanti qui. Citerò i punti rilevanti mentre passo esattamente attraverso ciò che sta accadendo nel tuo violino.

Confronta i tuoi due screenshot. Presta attenzione ai due riquadri che hanno cambiato posizione, 3_2 e 3_3, oltre alle caselle circostanti, 2_4, 3_0 e 3_1.

Prima

Prima

Dopo

Dopo

Quando lo schermo è ingrandito, fai spazio a 3_2 per spostarti dalla sua posizione originale accanto a 2_4, verso l’alto e accanto a 3_1:

  1. Una casella a sinistra che ha un’altra casella a sinistra alla sua sinistra potrebbe non avere il suo bordo esterno destro alla destra del bordo destro del suo blocco contenitore. (In modo approssimativo: un galleggiante di sinistra non può sporgere sul lato destro, a meno che non sia già il più a sinistra ansible.) Un’analoga regola vale per gli elementi che galleggiano a destra.
  1. Una scatola galleggiante deve essere posizionata il più in alto ansible.
  1. Una casella fluttuante a sinistra deve essere posizionata il più a sinistra ansible, una casella flottante a destra il più a destra ansible. Si preferisce una posizione più alta rispetto a una che è più a sinistra / a destra.

Questo a sua volta fa spazio alla successiva scatola galleggiante per occupare lo spazio il più in alto e il più a sinistra ansible, seguendo la stessa regola di cui sopra. Di conseguenza, 3_3 galleggia in alto, fermandosi solo a una coppia di 3_2, quindi fluttua il più ansible a sinistra lungo l’asse orizzontale, fermandosi appena a 2_4. Si noti che anche se sembra che 3_3 dovrebbe essere in grado di adattarsi tra 2_4 e 3_2, non lo fa, perché i margini devono essere rispettati (questo è ciò che si intende per “bordo esterno” sopra).

A questo punto, si applicano i seguenti elementi, oltre agli elementi # 8 e 9 sopra:

  1. Se la casella corrente è a virgola mobile, e ci sono delle caselle a virgola mobile generate da elementi precedenti nel documento sorgente, allora per ciascuna di tali caselle precedenti, il bordo esterno sinistro della casella corrente deve essere a destra della destra bordo esterno della scatola precedente, o la sua parte superiore deve essere inferiore alla parte inferiore della scatola precedente. Regole analoghe valgono per le scatole che galleggiano a destra.
  1. La parte superiore esterna di una scatola mobile potrebbe non essere più alta della parte superiore esterna di qualsiasi blocco o casella flottante generata da un elemento in precedenza nel documento sorgente.

Poiché 3_3 è così grande, crea una notevole sporgenza verso il basso dalla prima linea di scatole mobili. Ciò aumenta efficacemente l’altezza della prima linea. Tutti gli altri elementi fluttuanti che seguono 3_3 devono rimanere sulla propria linea, e questa seconda linea di galleggianti non deve intersecare il bordo del margine inferiore di 3_3. Questo è in gran parte regolato dall’articolo 5.