Formatting Context i Stacking Context podczas podczas renderowania strony

Formatting Context i Stacking Context to „konteksty”, które przeglądarka tworzy podczas renderowania strony, i oba mają duży wpływ na layout.

Formatting Context (kontekst formatowania)

Określa jak elementy są układane względem siebie (pionowo, poziomo, jak liczą się marginesy, jak działa float itp.), czyli „system zasad layoutu” dla elementów wewnątrz danego kontenera.

typy formatting contextów:

🔹Block Formatting Context (BFC) – domyślny dla większości elementów blokowych

• elementy układają się pionowo
• marginesy pionowe mogą się zapadać (margin collapsing)
• floaty mogą „wystawać” poza rodzica

Co tworzy nowy BFC?

• overflow: hidden | auto | scroll
• display: flow-root
• position: absolute | fixed
• float
• display: inline-block
• display: flex / grid (też tworzą własny kontekst)

🔹Inline Formatting Context – dotyczy tekstu i elementów inline

• tekst łamany w linie
• line-height, vertical-align

🔹Flex Formatting Context – tworzony przez: display: flex;

• dzieci układane są w jednym kierunku (row / column)
• nie ma margin collapsing
• float i clear nie działają

🔹Grid Formatting Context – tworzony przez: display: grid;

• layout oparty na siatce
• dzieci są umieszczane w komórkach gridu
• pełna kontrola nad pozycją elementów

Stacking Context (kontekst nakładania)