BFC 블록 포멧팅 컨텍스트

BFC(Block Formatting Context)

• BFC는 블록 레벨 요소를 랜더링하는 CSS의 비주얼 서식 모델 중 하나이다.

• 일반적인 문서의 흐름에 의해 배치되지 않고 독립적인 레이아웃 환경을 만들수 있는것으로 부모 입장에서 자식요소들을 누구까지 자신의 블록으로 포함해야 하는가를 형성하는것.

• 자식 요소가 독립적인 레이아웃을 갖기 위해서 플로팅(floating)되고 부모 요소와의 일반적인 종속 관계가 끊어지면서 부모 공간에서 제외된다.

블록 포맷 컨텍스트가 생성되는 상황

• float: none을 제외한 모든 float값

• overflow: visible을 제외한 모든 overflow값

• display: inline-block

• absolute, fixed로 배치된 요소

• … 등등 순수한 초기 고유값이 아닌 지정 해주는값들~

BFC 활용

• BFC는 마진겹침(margin collapsion)현상을 방지한다. 마진 겹침은 block 요소들의 상하 마진 값이 겹칠 경우 더 큰 마진만 적용되는 현상을 말한다.

• float 된 요소해제 : 부모 컨테이너 안으로 들여 놓는다.

• 넘침요소를 부모안으로 넣어준다 : 스크롤 되게끔...