BFC (Block Formatting Context)

Block Formatting Context? (블록 형식 지정 컨텍스트)

웹페이지의 블록 레벨 요소를 렌더링하는 데 사용되는 CSS의 비주얼 서식 모델 중 하나.

=> 웹 페이지를 렌더링하는 시각적인 CSS의 일부로서 블록 박스의 레이아웃이 발생하는 지점과 floating 요소의 상호작용 범위를 결정하는 범위라고 볼 수 있습니다.

다음 조건 중 하나만 만족한다면 새로운 BFC를 생성할 수 있습니다

• 루트 혹은 이를 포함하는 요소
• float가 none이 아니면서 clear 되지 않은 경우
• position이 absolute / fixed
• display가 inline-block / tabel-cell / tabel-caption
• overflow가 visible이 아님
• display가 flex / inline-flex

잠깐 설명드리자면..!

overflow: hidden //부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리

float: left //요소를 왼쪽으로 밀고 다른 요소가 주위를 둘러싸게 함

활용

1. 마진겹침 제거하기

https://codepen.io/BaeHaram/pen/YzXGZBd

마진 상쇄 제거효과

마진 상쇄? 요소의 margin 값이 겹칠 경우, 더 큰 margin만 적용되고 같다면 한 번만 적용되는 현상

마진 상쇄라는 특성 때문에 top 과 bottom에 각각 마진을 부여했지만 마진끼리 겹쳐서 10px만큼의 마진만 생기게 된다
=> BFC를 적용시키면 마진 상쇄효과가 없어지게 돼서 총 20px만큼의 마진이 생길 수 있다!

2. 부모가 자식을 모두 담지 못하는 경우 (float 사용)

https://codepen.io/BaeHaram/pen/oNXZBXJ

BFC 생성 전

BFC 생성 후

float을 사용하고 부모가 자식을 담지 못하는 경우에 BFC를 생성하게 해주는 코드를 넣으면 컨테이너가 담지 못했던 float을 담게 되고 float 크기만큼 커지게 됩니다!

float된 요소를 포함하는 컨테이너가 있는 경우가 많을 수 있는데 이 경우엔 보통 container를 clear시키는 방법을 사용합니다. 그런데 그것 말고도 BFC를 정의함으로써도 이것을 해결할 수 있는 것입니다!
=> float을 clear 시키는 다양한 방법 중에 여러가지가 있을 수 있는데 overfloe: hidden이 BFC를 생성하게 한 것입니다. 그래서 BFC는 float과의 상호작용에 영향을 미쳐서 float를 clear시키는 효과를 가져옵니다

BFC는 레이아웃 안의 작은 레이아웃이라고 생각하기
=> BFC 내부의 모든 요소는 설령 내부 요소가 float 상태라 하더라도 이 블록 안에 속한다. 그래서 float요소는 container 높이에 영향을 주게 된다.

3. float된 요소를 감싸는 텍스트를 분리하기

https://codepen.io/BaeHaram/pen/VwLpPvN

BFC 전(Figure 1) BFC 생성 후 (Figure 2)

Figure 1
p태그의 블록상자가 float 요소를 위한 공간을 만들기 위해 수평으로 좁아지게 됩니다.

BFC에서 각 상자의 왼쪽 가장자리는 container 블록의 왼쪽 가장자리에 닿게 됩니다. 그래서 새로운 BFC를 생성하지 않는다면 p태그의 텍스트가 증가한다면 float 요소 밑으로 이동될 것입니다.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
참고: WSC

전체 요소를 이동할 수 있다면 이 감싸지는 문제는 해결될 것입니다.

Figure 2
p태그에 새로운 BFC를 생성하기!
=> 더이상 container 박스의 왼쪽 가장자리로 닿게 되는 문제가 사라지게 되므로 간단하게 감싸는 문제를 해결할 수 있게 됩니다!



출처:
https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
https://www.w3.org/TR/CSS21/visuren.html#block-formatting
https://tesseractjh.tistory.com/m/145
https://velog.io/@seod0209/TIL-14.-overflow
https://velog.io/@1-blue/%EB%B8%94%EB%A1%9D-%EC%84%9C%EC%8B%9D-%EB%A7%A5%EB%9D%BD