오늘은 계속해서 웹카페 예제를 풀어가며 사이트 마크업과 디자인을 진행했다. 같은 결과를 도출하더라도 여러가지 방식을 사용했는데 그중 Normal-flow에서 벗어나는 float와 position이 유독 어렵게 느껴졌다. 이 둘을 잘 사용하려면 BFC에 대해 정확히 알아야 할 것 같아 추가로 공부해보았다.
먼저 MDN 문서를 찾아보았다.
BFC(Block Formatting Context)는 웹 페이지를 렌더링하는 시각적 CSS의 일부로 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다.
이러한 BFC는 다음과 같은 경우에 생성된다.
- 문서의 루트요소
- 플로팅 요소
- 절대 위치를 지정한 요소
- 인라인 블록
- overflow가 visible이 아닌 블록요소
- display가 flow-root
이외에도 다양한 경우에 BFC가 생성되지만 위 경우가 대표적인것 같다.
BFC는 레이아웃에 영향을 주지만, 보통 BFC를 만들어내는 요소가 내부 플로팅을 가두고, 외부 플로팅을 제외하고, 마진 콜랩싱을 제거하기에 위치 설정이나 플로팅 제거를 위해 많이 사용된다고 한다.
BFC MDN을 찾아보고 나니 float에 의해 오류처럼 보이는 현상이 일어났을때 다음과 같이 해결하는법들이 이해가 가게 되었다.
- 부모요소에 overflow를 hidden으로 설정하기
- 부모요소 또한 float 설정하기
- 부모요소의 display를 flow-root로 설정하기
참고
개발자를 꿈꾸며 공부중입니다.