블록 수준 서식 컨텍스트란 무엇입니까? 블록 수준 서식 컨텍스트를 생성하는 역할(코드 첨부)

(블록 서식 컨텍스트)는 말 그대로 "블록 수준 서식 컨텍스트"로 번역됩니다. Block-level Box만이 참여하는 독립적인 렌더링 영역으로 내부 Block-level Box의 배치 방식을 규정하며 이 영역 외부와는 아무런 관련이 없습니다. 그렇다면 블록 수준 서식 컨텍스트를 만드는 방법과 서식 컨텍스트의 역할은 무엇입니까? 다음 기사에서는 블록 수준 서식 지정 컨텍스트에 대해 공유합니다.

BFC의 트리거 조건은 블록 수준 서식 컨텍스트를 생성하기 위한 조건입니다.

==다음 조건 중 하나가 충족되면 BFC가 트리거될 수 있습니다==

[1] 루트 요소, 즉 는 HTML 요소입니다

[2 ]float 값은 none이 아닙니다

【3】overflow 값은 표시되지 않습니다

【4】display 값은 inline-block, table-cell, table-caption입니다.

【5】위치 값은 절대 또는 고정입니다.

서식 지정 컨텍스트(BFC) 생성 규칙:

우리가 흔히 말하는 상자는 여백(Margin), 테두리(Border), 패딩(Padding), 내용(Content)으로 구성됩니다. 실제로 각 유형의 4개 변은 항상 내용 상자, 패딩 상자, 테두리 상자 및 여백 유형 상자로 정의됩니다. 여백 상자는 블록 상자와 포함 블록의 인접한 블록 상자 사이의 수직 간격을 결정합니다.

BFC 레이아웃 규칙 2: 상자의 수직 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 두 개의 인접한 상자의 여백은 겹칩니다.

블록 상자와 포함 블록의 인접한 블록 상자 사이의 수직 간격을 결정하는 것은 여백 상자입니다.

BFC 레이아웃 규칙 3: 각 요소의 여백 상자 왼쪽은 포함 블록 테두리의 왼쪽에 닿습니다. 상자(왼쪽에서 오른쪽으로 형식 지정, 그렇지 않으면 그 반대로). 이는 float가 있는 경우에도 마찬가지입니다.

<div class="parent">
    <div class="child"></div>    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。
    <div class="child"></div>
</div>

분석: 두 하위 ps에 부동소수점을 추가합니다. 부동소수점의 결과로 부동소수점이 지워지지 않으면 상위 p는 다음 두 ps를 래핑하지 않지만 여전히 상위 p의 범위 내에 있게 됩니다. 왼쪽 플로트는 자식 p에 속합니다. 왼쪽은 부모 p의 경계 상자 왼쪽에 닿고, 오른쪽 부동은 자식 p가 부모 p의 경계 상자 오른쪽에 닿는 것을 의미합니다. 거리를 늘리도록 설정하면 이 규칙은 항상 동일합니다.

BFC 레이아웃 규칙 4: BFC 영역은 플로트 상자와 겹치지 않습니다:

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {            
 width: 100px;            
 height: 150px;            
 float: left;            
 background: #f66;
        }
  .main {            
  height: 200px;            
  overflow: hidden;//触发main盒子的BFC            
  background: #fcc;
        }
  .text{            
  width: 500px;
    }

위의 옆 상자에는 메인 상자의 내용을 덮는 부동 속성이 있으며, 메인 상자는 옆의 플로트를 지우지 않습니다. 상자. 자체 BFC를 실행하는 한 가지 작업만 수행하며, 그 다음에는 더 이상 옆 상자에 포함되지 않습니다. 따라서 BFC 영역은 플로트 상자와 겹치지 않습니다.

BFC의 기능은 무엇인가요?

1. 적응형 2열 레이아웃

2. 플로팅 요소를 포함할 수 있음 - 내부 플로트 지우기

4. 다른 BFC로 여백이 겹치는 것을 방지할 수 있습니다

여전히 위 코드입니다. 이때 BFC 영역은 float 상자와 겹치지 않으므로 이를 기반으로 합니다. 포함 블록(부모 p)의 너비와 옆 너비, 적응형 너비.

IE는 이상한 브라우저로서 당연히 BFC 표준을 단계별로 지원하지 못하므로 IE에는 Layout이 있습니다. 레이아웃과 BFC 기본적으로 동일합니다. IE 호환성을 처리하기 위해 BFC를 트리거해야 하는 경우 트리거 조건에서 CSS 속성을 사용하여 BFC를 트리거하는 것 외에도 IE를 타겟으로 해야 합니다. 브라우저는 Zoom: 1을 사용하여 IE 브라우저의 레이아웃을 트리거합니다.

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

오버플로 추가: 부모 pparent에 숨겨짐

플로트를 클리어하는 목적을 달성하기 위해 동일한 방향으로 플로트를 클리어할 수도 있습니다. 플로트를 클리어하는 원리는 두 p가 모두 가능하다는 것입니다. 동일한 부동 BFC 영역에 위치합니다

두 개의 인접한 블록 수준 하위 요소가 서로 다른 BFC에 속할 경우 마진 겹침을 방지할 수 있습니다.

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性            
            width: 100px;            
            height: 150px;            
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin属性            
            height: 200px;            
            background: #fcc;
        }
         .text{            
         /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/            
         overflow: hidden;//此时已经触发了BFC属性。
        }

위 내용은 블록 수준 서식 컨텍스트란 무엇입니까? 블록 수준 서식 컨텍스트를 생성하는 역할(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!