블록 서식 컨텍스트 및 작동 방식을 설명합니다.
예를 들어,
.some-class {
display: inline-block;
}
외부 디스플레이 유형은 요소가 흐름 레이아웃에 참여하는 규칙을 결정하고 내부 유형은 자식에 대한 레이아웃 규칙을 설정합니다.
블록 서식 컨텍스트가 형성되는 방법에는 여러 가지가 있습니다. 그리고 BFC는 CSS 레이아웃을 만드는 동안 다양한 용도로 사용할 수 있습니다. 아래에서 일반적으로 사용되는 몇 가지 예를 지적하겠습니다.
초기 블록 서식 컨텍스트
HTML 문서의 경우 첫 번째 블록 서식 컨텍스트는
<html> 요소 자체에 의해 설정됩니다. 초기 블록 서식 컨텍스트라고 하며 블록 및 인라인 요소로 구성되는 문서의 기본 흐름 레이아웃을 설정합니다. 흐름 레이아웃은 일반 흐름이라고도 합니다. 따라서 HTML 문서는 콘텐츠가 정상적인 흐름을 따르는 블록 서식 컨텍스트를 갖는 것으로 시작합니다. 그리고 정상적인 흐름은 콘텐츠가 블록 및 인라인 서식 컨텍스트 중 일부 또는 둘 다를 가질 수 있도록 합니다.흐름을 벗어난 요소 포함
블록 서식 컨텍스트는 요소가 정상적인 흐름에서 벗어나도록 만들어질 때 생성됩니다. 이는 일반적으로 요소의
position가 absolute 또는 fixed로 설정되거나 요소가 플로팅될 때 수행됩니다..some-class {
position: absolute;
}
p { float: left; }
이러한 규칙을 사용하면 요소가 문서 흐름에서 벗어나 자체 BFC를 형성합니다.
요소를 플로팅하면 여백이 축소되고 레이아웃이 중단될 위험이 있습니다. 따라서 상위 요소에 새 블록 서식 컨텍스트를 생성하여 레이아웃 내에 포함되어야 합니다. 이를 달성하는 다양한 방법이 있습니다. 하나는 아래에 언급된 것처럼
display: flow-root 를 사용하는 것과 관련됩니다.위드
display: flow-root;display: flow-root를 사용하면 새 블록 서식 컨텍스트가 생성됩니다. 이것은 플로트를 비우고 컨테이너 내부에 보관하여 결국 플로트를 유입 상태로 유지하는 데 특히 유용합니다.요소 자체를 플로팅하면 컨테이너의 레이아웃을 방해하는 BFC가 생성됩니다. 따라서 부동 요소 컨테이너의
display 값을 flow-root로 설정하면 루트인 <html> 에 있는 것과 유사한 BFC가 생성됩니다. 이것은 플로트가 정상적인 흐름을 따르도록 합니다.BFC가 형성될 수 있는 다른 많은 경우가 있으며 더 넓은 범위와 사용으로 인해 개별적으로 고려할 가치가 있습니다. 예를 들어
overflow 값이 visible 및 clip 이외의 값으로 설정된 경우입니다. 그리고 display가 flex 또는 grid 또는 임의의 table-* 값 등인 경우참조
Reference
이 문제에 관하여(블록 서식 컨텍스트 및 작동 방식을 설명합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anewman15/describe-block-formatting-context-and-how-it-works-4fkh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
