CSS2의 블록과 인라인 레이아웃 규칙에 따라 상자를 배치하지만 종속 관계를 갖는 하위 요소의 독립적인 배치 방식에 따라 상호작용 범위를 결정하는데 이것을 블록 양식화 문맥이라고 한다. 블록 양식화 문맥을 사용하면 일반적인 요소의 배치 흐름을 갖지 않고 공간을 좀더 다양하게 구성할 수 있다. 즉, 요소 안에 공간 상에 하위 요소들이 일반적인 문서의 흐름에 의해 배치되지 않고 독립적인 위치로 배치할 수 있다.
요소에 새로운 블록 양식화 문맥(이하 BFC)을 적용하면 하위 요소를 대상으로 한 독립적인 레이아웃 환경을 만들수 있고 다른 주변 요소와도 레이아웃 관계를 형성할 수 있다.
새로운 BFC 요소는 대표적으로 다음 조건을 충족하면 생성된다.
root
) 요소일 때html
는 웹 문서의 시작을 알리는 최상위 요소이다. 따라서 기본적으로 하위 요소들은 독립적인 레이아웃을 가질 수 있도록 되어 있다.float
속성 값을 none
이 아닌 값을 가지게 되면 독립적인 레이아웃 환경을 갖는다.position
속성이 absolute 또는 fixed
로 적용되어 있을 때position
속성 값을 absolute
또는 fixed
값을 가지게 되면 독립적인 레이아웃 환경을 갖는다.display
속성이 inline-block
으로 적용되어 있을 때inline-block
을 갖게되면 주변 inline 요소와 관계가 무너지면서 독립적인 공간을 형성하게 되므로 역시 독립적인 레이아웃 환경을 갖는다.overflow
속성의 값이 visible
이외의 값으로 적용되어 있을 때overflow
속성 값이 visible
이외의 값을 갖는 다는 것은 공간에 대한 크기 정의를 했다고 볼 수 있다. 그렇게 때문에 독립적인 공간을 형성한 것으로 볼 수 있으며 따라서 BFC를 요건을 가지고 있다.CSS 명세에 의하면 그 외 더 많은 경우가 있으나 여기서는 생략하겠다.
다음 샘플 코드의 경우 자식 요소가 독립적인 레이아웃을 갖기 위해서 플로팅(floating)되고 부모 요소와의 일반적인 종속 관계가 끊어지면서 부모 공간에서 제외된다. 따라서 부모 요소에게 블록 양식화 문맥을 적용하여 상호작용을 만든 뒤 하위 요소들의 독립적인 레이아웃을 허용하되 다른 주변 요소들과 레이아웃 관계를 형성할 수 있다.
하위 요소들이 독립적인 레이아웃 환경을 가지게 되면 상위 컨테이너에게 블록 양식화 문맥이 필요한 상황이 만들어진다.
블록 양식화 문맥이 만들어지는 상황에 따라 다르겠지만 아래 샘플 코드의 경우에는 자식 요소가 float
속성을 left
로 갖는 경우에 다음 몇 가지 처리를 통해 BFC를 생성할 수 있다.
float 속성을 통하여 블록 양식화 문맥을 갖는 경우가 가장 흔하고 대표적이다.
상기의 방법으로 BFC를 생성하는 경우 부모 및 자식 요소의 디자인 처리에 제한을 받을 수 있다. 따라서 새롭게 추가된 display
속성의 flow-root
값을 이용하여 BFC를 만들수 있다.