블록 양식화 문맥 개념 잡기

요소에 새로운 블록 양식화 문맥(이하 BFC)을 적용하면 하위 요소를 대상으로 한 독립적인 레이아웃 환경을 만들수 있고 다른 주변 요소와도 레이아웃 관계를 형성할 수 있다.

블록 양식화 문맥의 조건

새로운 BFC 요소는 대표적으로 다음 조건을 충족하면 생성된다.

• 루트(root) 요소일 때
  • html는 웹 문서의 시작을 알리는 최상위 요소이다. 따라서 기본적으로 하위 요소들은 독립적인 레이아웃을 가질 수 있도록 되어 있다.
• 플로팅(Floating) 되었을 때
  • 하위 요소가 선택적으로 float 속성 값을 none이 아닌 값을 가지게 되면 독립적인 레이아웃 환경을 갖는다.
• position 속성이 absolute 또는 fixed로 적용되어 있을 때
  • 하위 요소가 선택적으로 position 속성 값을 absolute 또는 fixed 값을 가지게 되면 독립적인 레이아웃 환경을 갖는다.
• display 속성이 inline-block으로 적용되어 있을 때
  • 하위 요소가 inline-block을 갖게되면 주변 inline 요소와 관계가 무너지면서 독립적인 공간을 형성하게 되므로 역시 독립적인 레이아웃 환경을 갖는다.
• overflow 속성의 값이 visible 이외의 값으로 적용되어 있을 때
  • overflow 속성 값이 visible 이외의 값을 갖는 다는 것은 공간에 대한 크기 정의를 했다고 볼 수 있다. 그렇게 때문에 독립적인 공간을 형성한 것으로 볼 수 있으며 따라서 BFC를 요건을 가지고 있다.

CSS 명세에 의하면 그 외 더 많은 경우가 있으나 여기서는 생략하겠다.

블록 양식화 문맥의 예시

다음 샘플 코드의 경우 자식 요소가 독립적인 레이아웃을 갖기 위해서 플로팅(floating)되고 부모 요소와의 일반적인 종속 관계가 끊어지면서 부모 공간에서 제외된다. 따라서 부모 요소에게 블록 양식화 문맥을 적용하여 상호작용을 만든 뒤 하위 요소들의 독립적인 레이아웃을 허용하되 다른 주변 요소들과 레이아웃 관계를 형성할 수 있다.

블록 양식화 문맥의 테스트 샘플

float 속성을 갖는 경우에 블록 양식화 문맥으로 만들기 예시

하위 요소들이 독립적인 레이아웃 환경을 가지게 되면 상위 컨테이너에게 블록 양식화 문맥이 필요한 상황이 만들어진다.

블록 양식화 문맥이 만들어지는 상황에 따라 다르겠지만 아래 샘플 코드의 경우에는 자식 요소가 float 속성을 left로 갖는 경우에  다음 몇 가지 처리를 통해 BFC를 생성할 수 있다.

float 속성을 통하여 블록 양식화 문맥을 갖는 경우가 가장 흔하고 대표적이다.

overflow 속성을 이용한 블록 양식화 문맥 만들기

float 속성을 이용한 블록 양식화 문맥 만들기

display 속성을 이용한 블록 양식화 문맥 만들기

상기의 방법으로 BFC를 생성하는 경우 부모 및 자식 요소의 디자인 처리에 제한을 받을 수 있다. 따라서 새롭게 추가된 display 속성의 flow-root 값을 이용하여 BFC를 만들수 있다.