Block Formatting Context (BFC)

BFC란 용어는 들어보지 못했어도 아마 html/css로 레이아웃 작성을 해봤다면 이미 BFC의 원리는 알고 있을 가능성이 크다. Normal Flow 일단 html에 작성된 요소들의 위치를 정하는 방법은 여러 가지 있는데, 일반적인 상황에서 각각의 요소들이 배치되는 순서를 normal-flow(일반적 흐름) 라고 한다. 이런식으로 블록 요소들은 기본적으로 위에서 아래로 배치되고 인라인 요소들은 왼쪽부터 시작해 오른쪽으로 배치된다. BFC & IFC normal flow에는 두 가지 배치 방식이 있는데 그중 한 가지가 Block Formatting Context(BFC) , 그리고 Inline Formatting Context(IFC) 다. 전자는 영역에 포함된 요소들을 세로로 배치할 수 있도록 도와주는..

2022.02.15