[CSS] Formatting Context

❓Formatting Context란

CSS의 Formatting Context는 요소들이 문서 내에서 어떻게 위치하고 상호작용하는지를 결정하는 중요한 역할을 합니다. 그중에서도 Block Formatting Context(BFC)와 Inline Formatting Context(IFC)는 웹 레이아웃에서 핵심적인 요소입니다.

❓BFC(Block Fomatting Context)란?

BFC는 블록 수준의 요소들이 특정 레이아웃 규칙을 따르는 독립적인 레이아웃 영역입니다. 특정 CSS 속성에 의해 새로운 BFC가 형성되며 BFC에 속한 레이아웃 규칙은 BFC 외부 요소들에게 영향을 끼치지 않습니다.

🔎 BFC 생성 조건

• display: float가 아닌 요소
• display: absolute인 요소
• position: fixed인 요소
• display: inline-block을 포함하는 요소
• display: flow-root를 포함하는 요소 등
  자세한 조건은 이곳을 참고해 주시기를 바랍니다.

❗️BFC의 장점

• BFC 내의 요소는 float된 요소와 겹치지 않습니다.
• 인접한 요소의 margin이 겹치지 않고 분리됩니다.

❓IFC(Inline Formatting Context)란?

IFC는 텍스트와 이미지 같은 인라인 수준 요소들이 수평으로 배치되는 레이아웃 영역입니다. 각각의 인라인 박스는 블록 컨테이너 내에서 생성되며 요소들은 특정 인라인 포맷 규칙에 따라 정렬됩니다.

🔎 IFC 생성 조건

• display: inline 또는 display: inline-block인 컨테이너 내부의 요소
• 블록 레벨 부모 요소 내의 텍스트, 이미지 등 인라인 요소
• inline-flex 또는 inline-grid 안의 인라인 요소 등
  자세한 조건은 이곳을 참고해 주시기를 바랍니다.

❗️IFC의 장점

• 인라인 요소들이 수평으로 정렬되며 필요에 따라 자연스럽게 래핑됩니다.
• 텍스트와 인라인 요소의 수직 정렬을 해줄 수 있습니다.

💡 결론

BFC와 IFC는 각각 블록과 인라인 요소가 CSS 레이아웃에서 어떻게 배치되고 상호작용하는지를 정의하는 중요한 개념입니다. 이렇게 포맷팅 컨텍스트를 이해하고 올바르게 사용하는 것은 안정적이고 의도한 대로 레이아웃을 구현하기 위해서 필수적이라고 생각합니다.