CSS의 블록 형식 컨텍스트 이해

키 테이크 아웃

블록 형식 컨텍스트 (BFC)는 블록 상자가 배치되는 웹 페이지의 시각적 CSS 렌더링의 일부입니다. ‘오버플로 : 스크롤’,‘디스플레이 : 플로어’,‘플로트 : 왼쪽’등과 같은 특정 CSS 조건을 추가하여 만들 수 있습니다. BFC는 여백이 붕괴 될 수 있습니다. 즉, 두 형제 상자 사이의 수직 거리가 개별 여백의 합이 아님을 의미합니다. 그러나 새로운 BFC를 생성하면이 마진 붕괴를 방지 할 수 있습니다.

BFC는 플로트를 포함하는 데 사용될 수 있습니다. 컨테이너가 요소를 떠난 시나리오에서 BFC를 정의하면 이러한 요소를 포함하고 페이지의 정상적인 흐름을 유지하는 데 도움이 될 수 있습니다. BFC는 텍스트가 떠 다니는 물체를 감싸는 것을 방지 할 수 있습니다. 단락 요소에 대한 새 BFC를 설정하면 더 이상 컨테이너 블록의 왼쪽 가장자리에 닿지 않아 텍스트가 떠 다니는 요소를 감싸지 못하게합니다. BFC는 다중 열 레이아웃에도 유용 할 수 있습니다. 레이아웃 열에서 새 BFC를 설정하면 이전 열이 채워진 후에 남은 공간이 항상 남아있어 마지막 열이 일부 브라우저에서 다음 줄로 떨어지지 않도록합니다.

블록 형식 컨텍스트는 블록 상자가 배치되는 웹 페이지의 시각적 CSS 렌더링의 일부입니다. 그것이 속한 위치 구성표는 정상 흐름입니다. W3C에 따르면 :

는 '가시적'이외의 '오버플로'가있는 (오버 플로우 '를 갖는 부동, 절대적으로 배치 된 요소, 인라인 블록, 테이블 셀, 테이블 캡션 및 요소가 부유합니다 (해당 값이 뷰포트로 전파 된 경우를 제외하고)는 새로운 블록 서식 컨텍스트를 설정합니다.
위의 인용문은 블록 서식 컨텍스트가 어떻게 형성되는지 거의 요약합니다. 그러나 이해하기 쉬운 방식으로 재정의 할 수 있습니다. 블록 서식 컨텍스트는 다음 조건 중 하나 이상을 만족시키는 HTML 상자입니다. <li> <float> 플로트의 값은 없음 </float> </li> <position> 위치의 값은 정적이거나 상대적이지 않습니다 <display> 디스플레이 값은 테이블 셀, 테이블 캡션, 인라인 블록, 플렉스 또는 인라인-플렉스 입니다. <over> 오버플로의 값은 보이지 않습니다 <form> 블록 서식 컨텍스트 생성 <at> 블록 서식 컨텍스트를 명시 적으로 트리거 할 수 있습니다. 따라서 새로운 블록 서식 컨텍스트를 만들려면 위에서 언급 한 CSS 조건 중 하나를 추가하면됩니다. 예를 들어 <look> 다음 html을보십시오 : <li> <form> 오버플로 : 스크롤, 오버플로 : 숨겨진, 디스플레이 : Flex, Float : Left 또는 Display : 컨테이너의 테이블. 위에서 언급 한 조건 중 하나는 블록 서식 컨텍스트를 생성 할 수 있지만 다음과 같은 다른 효과도 있습니다.<ul> <may> 디스플레이 : 테이블은 응답에 문제가 생길 수 있습니다 <:> 오버플로 : 스크롤에는 원치 않는 스크롤 바 가 표시 될 수 있습니다 <will> float : 왼쪽은 요소를 왼쪽으로 밀고 다른 요소가 주위를 감싸고 있습니다. <:> 오버플로 : Hidden은 오버플로를 클립합니다 </:></will></:></may> </ul> </form> </li> <we> 따라서 새로운 블록 서식 컨텍스트를 만들 때마다 요구 사항에 따라 최상의 조건을 선택합니다. 균일 성을 위해, 나는 오버플로를 사용했습니다 :이 기사의 모든 예에서 숨겨져 있습니다. <li> </li> <to> 당신은 오버플로가 아닌 다른 선언을 자유롭게 플레이 할 수 있습니다. <li> <of> 블록 서식 컨텍스트에서 상자의 정렬 <c> W3C 사양 상태 : </c></of> </li> <form> 블록 서식 컨텍스트에서 각 상자의 왼쪽 외부 가장자리는 포함 블록의 왼쪽 가장자리에 닿습니다 (오른쪽에서 왼쪽에서 오른쪽 가장자리 터치). 상자가 새로운 블록 서식 컨텍스트 (즉, 상자 자체 may <may> 수레로 인해 더 좁아집니다). <li> </li> </may> </form></to></we></look></at> </form></over></display></position></pretty></absolutely> </ul> <p> 위의 다이어그램에서 볼 수 있듯이 블록 서식 컨텍스트에 속하는 모든 상자는 왼쪽으로 정렬되고 (왼쪽에서 오른쪽 형식) 왼쪽 외부에 닿는다. 차단하다. 마지막 상자에서 우리는 왼쪽에 플로팅 된 요소 (갈색)가 있지만 다른 요소 (녹색)는 여전히 포함 된 블록의 왼쪽 가장자리에 닿습니다. 이런 일이 발생하는 이유에 대한 원칙은 아래에서 텍스트 랩핑 섹션에서 설명합니다. </p> <at> 블록 형식 컨텍스트는 붕괴 된 여백을 유발합니다 <pre class="brush:php;toolbar:false"><span><span><span><div> class<span>="container"</span>> Some Content here <span><span><span></span></span></span> </div></span>></span></span> 정상적인 흐름에서, 상자는 포함 된 블록의 상단에서 시작하여 다시 수직으로 놓여있다. 두 형제 상자 사이의 수직 거리는 두 형제의 개별 여백에 의해 결정되지만 두 여백의 합은 아닙니다. 이것을 이해하기 위해 예를 고려해 보자
위의 다이어그램에서 우리는 레드 박스 (div)에 두 개의 녹색 형제 (p 요소)가 포함 된 블록 형식 컨텍스트가 생성 된 것으로 간주합니다.

및 해당 CSS는 다음과 같습니다

이상적으로 두 형제 사이의 마진은 두 요소의 여백 (20px) 이었지만 실제로는 10px입니다. 이것은 붕괴 마진이라고합니다. 형제 자매의 여백이 다른 경우, 더 높은 마진이 우선합니다.

Codepen에서 sitepoint (@sitepoint)의 펜 Ovzrer를 참조하십시오마진 붕괴를 방지하기 위해 블록 서식 컨텍스트를 사용하는

이것은 우리가 블록 형식의 컨텍스트가 마진 붕괴를 일으키는 것을 위에서 논의한 이후 처음에는 약간 혼란 스러울 수 있습니다. 그러나 우리가 명심해야 할 한 가지는 인접한 블록 상자 (형제) 사이의 수직 마진이 동일한 블록 서식 컨텍스트에있는 경우에만 무너진다는 것입니다. 그들이 다른 블록 형식 형식에 속하면 그들 사이의 여백은 무너지지 않습니다. 따라서 새로운 블록 형식 형식 컨텍스트를 만들면 마진 붕괴를 방지 할 수 있습니다. 이전 예제에 세 번째 형제를 추가하겠습니다. html은 다음과 같습니다. 해당 CSS가있는 :

결과는 위와 동일합니다. 즉, 붕괴가 발생하고 세 형제는 수직 거리 10px로 분리됩니다. 세 개의 p 태그가 모두 동일한 블록 서식 컨텍스트의 일부이기 때문에 발생합니다.

이제 세 번째 형제를 수정하여 새로운 블록 서식 컨텍스트의 일부가되도록합니다. 그런 다음 HTML이됩니다

및 CSS :

이제 출력에 차이가있을 것입니다 :

<span><span><span><div> class<span>="container"</span>>
  Some Content here
<span><span><span></span></span></span>
</div></span>></span></span>

두 번째와 세 번째 형제 자매는 다른 형식의 컨텍스트에 속하므로 다음 데모에서 알 수 있듯이 마진이 붕괴되지 않습니다. Codepen에서 sitepoint (@SitePoint)의 펜 XBVOXP를 참조하십시오 블록 서식 컨텍스트를 사용하여 플로트를 포함합니다 블록 형식 컨텍스트에는 플로트가 포함될 수 있습니다. 여러 번 우리는 컨테이너가 요소를 떠난 상황을 만날 것입니다. 이 경우 컨테이너 요소는 높이가없고 떠 다니는 어린이는 페이지의 정상적인 흐름을 벗어납니다. 우리는 일반적 으로이 문제를 해결하기 위해 명확한 수정을 사용하며, 가장 인기있는 방법은 "청소 된"의사 요소를 사용하는 것입니다. 그러나 우리는 또한 블록 형식 형식의 컨텍스트를 정의함으로써이를 달성 할 수 있습니다.

.

<span><span>.container</span> {
</span>  <span>overflow: hidden;
</span><span>}</span>

예를 들여다 보자

CSS와 함께 :

위의 경우 컨테이너의 높이가 없으며 떠 다니는 어린이가 포함되어 있지 않습니다. 이 문제를 해결하기 위해 Overflow : Hidden을 추가하여 컨테이너 내부에 새로운 블록 서식 컨텍스트를 설정합니다. 수정 된 CSS는 다음과 같습니다

이제 컨테이너에는 플로트 형제 자매가 포함되며 높이는 어린이를 포함하도록 확장 될 것입니다. Codepen에서 sitepoint (@sitepoint)에 의해 블록 서식 컨텍스트가 있거나없는 펜 플로트를 참조하십시오. 텍스트 랩핑을 방지하기 위해 블록 서식 컨텍스트를 사용하여 때로는 부유 한 div 주변의 텍스트가 주위를 감싸지 만 (아래 이미지의 그림 1에서와 같이) 경우에 따라 이것은 바람직하지 않으며 그림 2에서와 같이 모양을 원합니다.이를 해결하기 위해 마진을 사용할 수 있습니다. 그러나 우리는 또한 블록 서식 컨텍스트로 이것을 해결할 수 있습니다.

먼저 텍스트가 랩하는 이유를 이해해 드리겠습니다. 이를 위해 요소가 떠 올랐을 때 상자 모델이 어떻게 작동하는지 이해해야합니다. 이것은 블록 서식 컨텍스트에서 정렬을 논의하면서 앞서 남긴 부분입니다. 아래 다이어그램의 그림 1에서 무슨 일이 일어나고 있는지 이해해 보자.

다이어그램의 HTML은 다음과 같이 가정 할 수 있습니다

위의 다이어그램의 전체 검은 영역은 p 요소를 나타냅니다. 우리가 볼 수 있듯이, P 요소는 변하지 않지만 플로팅 된 요소 아래로갑니다. P 요소 (텍스트 줄 참조)의 라인 상자는 시프트를 겪습니다. 따라서 라인 상자는 수평으로 좁아서 플로팅 된 요소의 공간을 만듭니다.

텍스트가 증가함에 따라 라인 박스가 더 이상 이동할 필요가 없으므로 그림 1과 같은 조건이 나타나기 때문에 결국 플로팅 요소 아래로 랩됩니다. 이것은 플로팅 된 요소가 존재하는 경우에도 단락이 포함 된 상자의 왼쪽 가장자리에 어떻게 터치하는지 설명하고 플로팅 된 요소를 수용 할 수 있도록 라인 상자가 좁아지는 방법을 설명합니다. 전체 P 요소를 이동할 수 있다면이 랩핑 문제가 해결됩니다. 솔루션에 가기 전에 W3C 사양이 말하는 내용을 다시 기억하겠습니다.

블록 서식 컨텍스트에서 각 상자의 왼쪽 외부 가장자리는 포함 블록의 왼쪽 가장자리에 닿습니다 (오른쪽에서 왼쪽에서 오른쪽 가장자리 터치). 상자가 새로운 블록 서식 컨텍스트 (즉, 상자 자체 may 수레로 인해 더 좁아집니다).

이에 따르면, P 요소가 새로운 블록 형식 형식 컨텍스트를 설정하면 더 이상 컨테이너 블록의 왼쪽 가장자리에 닿지 않습니다. 이것은 단순히 오버플로를 추가하면 P 요소에 숨겨져서 달성 할 수 있습니다. 이 방법으로 새로운 블록 서식 컨텍스트를 생성하면 텍스트가 떠 다니는 물체를 감싸는 문제가 해결됩니다. Codepen에서 SitePoint (@SitePoint)에 의한 텍스트 랩을 방지하는 블록 형식 컨텍스트 펜을 참조하십시오.다중 열 레이아웃에서 블록 서식 컨텍스트를 사용하는 컨테이너의 전체 너비에 걸쳐 다중 열 레이아웃을 만들면 마지막 열이 일부 브라우저에서 다음 줄로 떨어집니다. 브라우저가 열의 너비를 반올림하고 총 폭이 컨테이너보다 더 많아지기 때문에 발생할 수 있습니다. 그러나 레이아웃 열에서 새로운 블록 서식 컨텍스트를 설정하면 이전 열이 채워진 후에도 남은 공간을 항상 가져갑니다.

. 3 개의 열이있는 다중 열 레이아웃의 예를 사용해 봅시다. 여기 html이 있습니다 :

및 CSS :

결과는 Codepen 데모입니다 : Codepen에서 SitePoint (@SitePoint)에 의해 최종 열을 "적합"하기 위해 블록 서식 컨텍스트를 사용하여 펜을 참조하십시오. 이제 컨테이너의 너비가 약간 변하면 레이아웃이 파손되지 않습니다. 물론 이것은 반드시 멀티 컬럼 레이아웃에 좋은 옵션 일 필요는 없지만 최종 열이 떨어지는 문제를 방지하는 한 가지 방법입니다. Flexbox는 이와 같은 경우에 더 나은 솔루션이 될 것입니다. 그러나 이것은 이러한 상황에서 요소가 어떻게 행동하는지 설명하는 데 도움이 될 것입니다.

.

결론 이 게시물에서 블록 서식 컨텍스트의 관련성과 페이지에서 요소의 시각적 위치에 어떤 영향을 미치는지 보여 주셨으면합니다. 실제적인 경우에 사용을 보여주는 예제는 조금 더 명확하게 만들어야합니다.

추가 할 것이 있으면 의견에 알려주십시오. 그리고 더 깊이 가고 싶다면 주제에 대한 W3C의 더 자세한 토론을 검토하십시오.

. CSS의 블록 형식 컨텍스트에 대한 자주 묻는 질문 (FAQ) CSS에서 블록 형식의 컨텍스트의 중요성은 무엇입니까?

<span><span><span><div> class<span>="container"</span>>
  Some Content here
<span><span><span></span></span></span>
</div></span>></span></span>

블록 서식 컨텍스트 (BFC)는 웹 페이지에서 요소의 레이아웃을 제어하는 ​​CSS의 기본 개념입니다. 요소의 위치 및 스타일, 특히 복잡한 레이아웃에서 중요한 역할을합니다. BFCS는 플로트, 인라인 블록 및 테이블을 포함하는 문서의 섹션을 분리하는 데 도움이되며, 이는 예상치 못한 요소의 겹치는 중첩을 방지 할 수 있습니다. BFC를 이해하는 것은 개발자가보다 강력하고 예측 가능한 설계를 만드는 데 도움이 될 수 있습니다.

블록 형식 컨텍스트는 부동 요소의 레이아웃에 어떤 영향을 미칩니 까? BFC 외부의 요소 레이아웃에는 영향을 미치지 않습니다. 이것은 텍스트 나 다른 요소가 떠 다니는 요소를 감싸는 것을 방지 할 때 특히 유용합니다. 새 BFC를 만들면 플로팅 요소가 다른 요소의 위치를 ​​방해하지 않도록 할 수 있습니다. 새로운 블록 서식 컨텍스트를 어떻게 만들 수 있습니까?

CSS에서 새로운 BFC를 설정하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법 중 일부는 CSS 속성 '디스플레이'를 '흐름 뿌리', '플렉스'또는 '그리드'로 설정하거나 '오버플로'를‘가시 보이는’이외의 다른 것으로 설정하는 것입니다. 새 BFC를 생성하는 다른 속성에는 '값이'레이아웃 ','페인트 '또는 그 중 하나를 포함한 복합 값이 포함되어있는 경우, 기타 값이있는 경우'열-카운트 '또는'열 넓이 '가 포함됩니다. 'auto'보다.

블록 서식 컨텍스트가 여백에 미치는 영향은 무엇입니까?

BFC의 주요 특징 중 하나는 마진 붕괴를 방지한다는 것입니다. CSS에서, 인접한 수직 마진은 때때로 단일 마진으로 붕괴 될 수 있으며, 이는 개별 마진의 최대 값입니다. 그러나 BFC에서는 첫 번째 자녀의 상단 마진과 마지막 자녀의 최저 마진은 BFC 자체의 마진과 붕괴되지 않습니다. 이는 요소의 간격을 제어하는 ​​데 유용 할 수 있습니다.

블록 포맷 컨텍스트가 오버플로를 처리하는 방법은 무엇입니까?

요소의 컨텐츠가 상자를 넘치면 BFC는이 오버플로를 관리하는 데 도움이 될 수 있습니다. 요소가 새로운 BFC를 생성하면 쏟아지지 않고 오버플로가 BFC에 클립됩니다. 이것은 '오버 플로우'속성을 사용하여 'auto', 'scroll'또는 'hidden'과 같은 값을 사용하여 제어 할 수 있습니다.

블록 서식 컨텍스트는 '명확한'속성에 어떤 영향을 미칩니 까? CSS의 '명확한'속성은 부동 요소의 흐름을 제어하는 ​​데 사용됩니다. BFC에서 '명확한'속성은 동일한 BFC 내의 요소에만 영향을 미칩니다. 이것은 'Clear'세트가있는 요소가 부모 BFC에서 플로트 아래로 움직이지 않으며 자체 BFC 내에서 플로트 만 부유합니다.

형식을 차단할 수 있습니까?

예, BFC는 CAN CAN입니다. 서로 안에 둥지를 맞 춥니 다. 각 BFC는 부모 및 형제 BFC와 독립적으로 작동합니다. 이것은 부유물, 마진 및 기타 레이아웃 기능이 각 BFC 내에 포함되어 있으며 다른 BFC의 요소에 영향을 미치지 않음을 의미합니다.

블록 포맷 컨텍스트는 Flex 및 그리드 레이아웃과 어떻게 상호 작용 하는가? CSS의 Flex 및 Grid 레이아웃은 자동으로 새로운 BFC를 생성합니다. 이것은 그들이 부유물을 함유하고 다른 BFC와 같은 방식으로 마진 붕괴 및 오버플로를 방지한다는 것을 의미합니다. 따라서 BFC를 이해하는 것은 플렉스 및 그리드 레이아웃의 동작을 이해하는 데 도움이 될 수 있습니다.

블록 서식 컨텍스트와 스택 컨텍스트 사이의 관계는 무엇입니까?

BFC와 스택 컨텍스트는 CSS의 두 가지 개별 개념입니다. 그러나 특정 상황에서 상호 작용할 수 있습니다. 예를 들어, '상대'또는 '절대'의 '위치'값과 '자동'이외의 'z-index'값을 가진 요소로 새로운 스택 컨텍스트를 만들 수 있습니다. 이것은 특히 부유물 및 겹침과 관련하여 BFC에서 요소의 렌더링에 영향을 줄 수 있습니다.
블록 서식 컨텍스트와 관련된 브라우저 호환성 문제가 있습니까?

대부분의 최신 브라우저는 BFC를 올바르게 일관되게 처리합니다. 그러나 이전 브라우저, 특히 인터넷 익스플로러에는 약간의 차이가있을 수 있습니다. 여러 브라우저에서 레이아웃을 테스트하여 예상대로 행동하는 것이 좋습니다.

위 내용은 CSS의 블록 형식 컨텍스트 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!