Come funziona il contesto di formattazione dei blocchi CSS?

Come funziona il contesto di formattazione dei blocchi CSS ?

Le specifiche CSS2.1 dicono che in un contesto di formattazione a blocchi, le scatole sono disposte verticalmente, iniziando dall’alto. Ciò accade anche se ci sono elementi flottati nel modo, tranne se la casella di blocco ha stabilito un nuovo contesto di formattazione del blocco. Come sappiamo, quando i browser eseguono il rendering di riquadri di blocchi in un contesto di formattazione a blocchi, l’elemento fluttuante viene omesso, perché è necessario stabilire un nuovo contesto di formattazione dei blocchi?

Come sono disposte le scatole (scatole di blocchi e scatole in linea) nel stream normale?

Ho letto da qualche parte che gli elementi di blocco generano caselle di blocco, ma gli elementi mobili vengono ignorati quando un agente utente disegna una casella e li prende in considerazione quando compilano il contenuto. Mentre gli elementi fluttuanti si sovrappongono al limite degli altri elementi delle caselle, la soluzione sta stabilendo un nuovo contesto di formattazione dei blocchi per gli elementi sovrapposti utilizzando l’ overflow:hidden .

“Il nuovo contesto di formattazione dei blocchi è ancora in fase di formattazione dei blocchi”, quindi quando si disegna una casella, tratterà anche l’elemento fluttuante come se non uscisse. È giusto o ho frainteso “il nuovo contesto di formattazione dei blocchi?”

Aggiornamento: più domande

Dicendo “È questo comportamento che è utile per i layout di stile colonnare, ma l’uso principale è quello di fermare i float, diciamo in un div” contenuto principale “, in realtà cancellando le colonne laterali flottanti, cioè i float che appaiono prima nel codice sorgente.”

Non capisco il significato, fornirò un esempio, forse mi capirai.

 .content { background: #eee; color #000; border: 3px solid #444; width: 500px; height: 200px; } .float { background: rgba(0, 0, 255, 0.5); border: 1px solid #00f; width: 150px; height: 150px; float: right; } p { background: #444; color: #fff; } 
 

This is a content box

It contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> line boxes that are shortened to make room for the float. This is normal behaviour.

floated box

Pensavo che la scatola mobile dovesse fluttuare verso l’alto del blocco di contenimento, il div con content class. Inoltre, se la casella mobile appare prima nel markup, allora mostrerà ciò che penso che dovrebbe essere.

 .content { background: #eee; color #000; border: 3px solid #444; width: 500px; height: 200px; } .float { background: rgba(0, 0, 255, 0.5); border: 1px solid #00f; width: 150px; height: 150px; float: right; } p { background: #444; color: #fff; } 
 
floated box

This is a content box

it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> line boxes that are shortened to make room for the float, this is normal behaviour

Come possiamo spiegarlo? Possiamo usare “contesto di formattazione dei blocchi e contesto di formattazione in linea” per spiegarlo?

Blocca i contesti di formattazione

Galleggia, elementi posizionati in modo assoluto, contenitori di blocchi (come blocchi in linea, celle di tabella e didascalie delle tabelle) che non sono riquadri di blocchi e caselle di blocco con “overflow” diverso da “visibile” (tranne quando tale valore è stato propagato al viewport) stabilisce nuovi contesti di formattazione dei blocchi per i loro contenuti.

Con il mio audace, è il bit di stabilire che è importante

Ciò significa che l’elemento che usi overflow (qualsiasi cosa diversa da visible) o float o inline-block ..etc on diventa responsabile per il layout dei suoi elementi figli. Sono gli elementi figli che vengono poi “contenuti”, sia che fluttuano o che collassano i margini che dovrebbero essere interamente contenuti dal loro genitore che li delimita.

In un contesto di formattazione a blocchi, il bordo esterno sinistro di ciascuna casella tocca il bordo sinistro del blocco contenitore (per la formattazione da destra a sinistra, i bordi a destra toccano)

Cosa significa la riga sopra:

Poiché una scatola può essere solo rettangular e non irregolare, ciò significa che un nuovo contesto di formattazione dei blocchi tra due galleggianti (o anche uno accanto) non si avvolgerà attorno ai galleggianti laterali vicini. Le scatole interne per i bambini non possono che estendersi fino a toccare il bordo sinistro dei genitori (o destra in RTL). È questo comportamento che è utile per i layout di stile colonnare. L’uso principale di esso è comunque quello di fermare i float, ad esempio in un div “main content”, in realtà eliminando le colonne laterali flottanti, cioè i float che appaiono prima nel codice sorgente.


Liquidazione galleggiante

In normali circostanze, i float dovrebbero cancellare tutti i precedenti elementi flottanti, che in precedenza erano fluttuanti nell’intero codice sorgente, non solo la “colonna” visualizzata. La citazione esplicativa delle “specifiche float” è:

Questa proprietà indica quali lati delle scatole di un elemento non possono essere adiacenti a una scatola galleggiante precedente. La proprietà ‘clear’ non considera i float all’interno dell’elemento stesso o in altri contesti di formattazione di blocchi

Quindi, diciamo che hai un layout a tre colonne dove le colonne sinistra e destra sono flottanti rispettivamente a sinistra e a destra, le colonne laterali ora sono in nuovi contesti di formattazione dei blocchi, perché sono floatate (ricorda che float è anche una delle proprietà che stabiliscono un nuovo BFC ), così puoi galleggiare felicemente gli elementi della lista al loro interno e rimuovono solo i float che sono già all’interno delle colonne laterali a cui non interessa più i float precedentemente nel codice sorgente


Per rendere il contenuto principale un nuovo contesto di formattazione del blocco o no?

Ora quella colonna centrale, puoi semplicemente marginarla da entrambi i lati in modo che appaia ordinatamente tra le due colonne flottate laterali e prendi la larghezza rimanente, un modo comune per ottenere la larghezza desiderata se la colonna centrale è “fluida” – che andate bene fino a quando non avrete bisogno di usare float / clearance all’interno del vostro div di contenuto (un evento comune per coloro che usano hack “clearfix” o modelli che li includono)

Prendi questo codice molto semplice:

 #left-col { border: 1px solid #000; width: 180px; float: left; } #right-col { border: 1px solid #000; width: 180px; float: right; height: 200px; } #content { background: #eee; margin: 0 200px; } .floated { float: right; width: 180px; height: 100px; background: #dad; } 
 
left column
right column

Main Content

Lorem ipsum etc..

this a floated box
this a floated box