BFC(Block Formatting Context)가 무엇인가요?
BFC(Block Formatting Context)는 CSS 레이아웃 모델에서 요소를 배치하는 데 사용되는 개념입니다. BFC는 해당 요소와 그 자식 요소들이 어떻게 배치되고 상호작용하는지를 정의하는 독립적인 레이아웃 컨텍스트를 생성합니다.
BFC의 주요 특징과 동작 방식
BFC의 주요 특징과 동작 방식은 다음과 같습니다:
-
요소의 배치: BFC 내의 블록 요소는 수직으로 위에서 아래로 배치됩니다. 인접한 블록 요소는 수평으로 나란히 배치되며, 요소 간의 공간은 마진(margin)으로 결정됩니다.
-
부모 요소와의 상호작용: BFC는 부모 요소와 자식 요소 사이의 상호작용을 격리시킵니다. BFC 내의 자식 요소는 BFC 외부의 요소와 상호작용하지 않고, 부모 요소의 크기에 영향을 받습니다.
-
Floated 요소 처리: BFC는 부모 요소가 float된 자식 요소를 감쌀 수 있도록 합니다. 이는 부모 요소가 float된 자식 요소를 감지하고 높이를 조정하여 레이아웃의 깨짐을 방지하는 데 도움이 됩니다.
-
Clearing Floats: BFC는 부모 요소에
clear: left또는clear: right속성을 사용하여 float된 요소의 영향을 피할 수 있도록 합니다. 이를 통해 float된 요소가 영향을 주지 않고 부모 요소의 영역 내에 콘텐츠가 표시될 수 있습니다.
BFC는 다양한 상황에서 유용하게 사용될 수 있습니다. 예를 들어, float된 요소를 처리하거나 부모 요소와 자식 요소의 상호작용을 격리시키고 싶을 때 BFC를 사용할 수 있습니다. BFC는 overflow: hidden, display: inline-block, float: left 등의 속성을 사용하여 생성될 수 있습니다.
BFC는 웹 페이지의 레이아웃과 요소의 배치를 관리하기 위한 강력한 도구로 사용될 수 있으며, 정확한 배치와 원하는 동작을 구현하는 데 도움이 됩니다.
