Kort fortalt: En BFC (Block Formatting Context) er en “mini-verden” for layout i CSS. Når et element etablerer en BFC, påvirkes dets indhold og naboer af nogle klare regler: floats holdes inde, margin-collaps kan ændre sig, og layout bliver ofte mere stabilt.
Det lyder teoretisk, men BFC er et af de begreber der forklarer mange “hvorfor hopper den her kasse?”-problemer.
Hvad betyder BFC?
I normal dokument-flow kan elementers margin, floats og indhold interagere på måder der virker ulogiske, hvis man ikke kender reglerne. En BFC:
- afgrænser hvordan floats påvirker omgivelserne
- ændrer hvornår marginer kollapser (margin-collaps)
- fungerer som en slags “containment” for layout-effekter
Praktisk: BFC gør det ofte lettere at bygge komponenter der ikke lækker layout-bivirkninger ud i resten af siden.
Hvorfor er det vigtigt?
Stabilt layout (CLS)
Hvis elementer flytter sig når billeder, fonts eller embeds loader, får du typisk dårligere CLS. BFC løser ikke alle CLS-problemer, men den kan fjerne nogle af de klassiske årsager:
- float-elementer der pludselig ændrer højde/bredde og “skubber” naboer
- containere der ikke omslutter deres floats (collapsing height)
- margin-collaps der gør spacing uforudsigelig når DOM ændres
Vedligeholdelig CSS
Når komponenter kan stå alene uden at påvirke resten af siden, bliver CSS lettere at ændre uden at skabe regressions.
Hvordan skaber man en BFC?
Der er flere måder. De mest praktiske i moderne CSS er:
display: flow-root;(ren og “moderne” måde at lave en wrapper der omslutter floats)overflow: auto;elleroverflow: hidden;(klassiker, men kan have sideeffekter som clipping/scrollbars)contain: layout;(mere avanceret – se også opslaget om CSS contain hvis du bruger det bevidst)
Hvis du har en container der ikke omslutter sine floats, er flow-root typisk det mindst overraskende.
Eksempel fra praksis
Et klassisk problem:
- Du har et kort (
.card) med et floatet ikon eller billede. - Containerens højde bliver “0” eller for lille.
- Når indholdet loader (tekst, billeder), ændrer layout sig og du ser hop.
En løsning kan være at gøre wrapperen til en BFC, så den omslutter floaten korrekt. I moderne CSS er display: flow-root ofte den “pæne” løsning.
Hvis du arbejder med ældre temaer, ser du ofte hacks som overflow: hidden – de virker, men kan give uønsket clipping.
Typiske misforståelser
“BFC er kun for floats”
Floats er den klassiske årsag til at man støder på BFC, men BFC er bredere: det handler om formatting context og hvordan layout-regler anvendes i et afgrænset område.
“BFC er performance-optimering”
BFC er primært en layout-regel. Den kan indirekte forbedre performance ved at reducere layout-jank (og dermed gøre oplevelsen bedre), men den er ikke et magisk speed-trick.
Relaterede begreber og næste skridt
- CLS – hvis dit problem er “hop”, skal du herfra til konkrete CLS-kilder (billeder, fonts, embeds)
- Semantisk HTML – stabil struktur starter ofte i markup
- Responsive design – mange layout-problemer er breakpoint-afhængige
FAQ
Er BFC noget jeg 'slår til'?
BFC er et resultat af visse CSS-egenskaber. Du skaber typisk en ny BFC ved fx `overflow: auto`, `display: flow-root` eller `contain: layout`.
Hvorfor har BFC noget med CLS at gøre?
CLS handler om uventede layout-skift. BFC kan gøre layoutet mere forudsigeligt ved at afgrænse float-adfærd og margin-collaps, så elementer ikke pludselig flytter sig når indhold loader.
Eksterne kilder
BFC er defineret i CSS-specifikationerne og forklaret i praksis i velkendte referencer.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Fix CLS: sådan gør du layout stabilt uden hop i indholdet
Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.
Optimer cookie banner uden CLS og INP problemer
Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Fonts uden CLS: undgå layout hop fra webfonts og fallback fonts
Se hvordan font-display, preload, fallback fonts og font metrics påvirker CLS, og lær hvordan du gør tekst stabil fra første visning.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
