BFC

블록 서식 맥락(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다. -mdn

• 문서의 루트 요소(html).
• 플로팅 요소(float이 none이 아님).
• 절대 위치를 지정한 요소(position이 absolute 또는 fixed).
• 인라인 블록(display가 inline-block).
• 표 칸(display가 table-cell, HTML 표 칸의 기본값).
• 표 주석(display가 table-caption, HTML 표 주석의 기본값).
• display가 table, table-row, table-row-group, table-header- group, table-footer-group (HTML 표에서, 각각 표 전체, 행, 본문, 헤더, 푸터의 기본값) 또는 inline-table인 요소가 암시적으로 생성한 무명 칸.
• overflow가 visible이 아닌 블록 요소.
• display가 flow-root.
• contain이 layout, content, paint.
  스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 플렉스 항목 (display가 flex 또는 inline-flex인 요소의 바로 아래 자식)
  스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 그리드 항목 (display가 grid 또는 inline-grid인 요소의 바로 아래 자식)
  다열 컨테이너(column-count (en-US) 또는 (column-width (en-US) 가 auto가 아닌 경우. column-count: 1 포함).
• column-span (en-US)이 all인 경우. 해당하는 요소가 다열 컨테이너 안에 위치하지 않아도 항상 새로운 블록 서식 맥락을 생성해야 합니다

라고 적혀있는데.. 생각보다 굉장히 어렵지만 꽤나 자주 우리를 괴롭히는 문제인 것 같다 예를 들자면 마진겹침...혹은 마진겹침..혹은 마진겹침,.

조금 쉽게 설명하자면

원래의 요소의 배치 구조를 가지지 않고 좀 더 자유로운 구성을 가질 수 있다(독립적인 위치로)

인것같다

왜 이렇게 이해했냐면
position absolute flow root 즉 floating되어있는 상태를 봤을대 두가지 속성은 요소를 띄워버려서 부모가 높이를 인식 못한다

새로운 블록을 가져버리는 것, 원래의 문서 구조를 파괴하고 독자적인 위치를 가지는 것

어려운게 생길때마다 더 공부해서 추가해야겠다