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> 블록 형식 컨텍스트는 붕괴 된 여백을 유발합니다 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span><span><span><div</span> class<span>="container"</span>></span> </span> Some Content here <span><span><span></div</span>></span></span>
로그인 후 복사
로그인 후 복사

로그인 후 복사