CSS에서 BFC와 IFC의 활용 사례 분석-CSS 튜토리얼-php.cn

CSS에서 BFC와 IFC의 활용 사례 분석

小云云

풀어 주다： 2018-02-02 10:44:38

원래의

1826명이 탐색했습니다.

예전에 누군가 CSS에서 BFC에 대해 언급한 것을 들은 적이 있습니다. IFE 실습 중에 마진 붕괴 문제가 발생하여 우연히 BFC의 메커니즘을 알아냈습니다. (참고자료는 글 말미의 참고자료를 참고하세요)

이 글은 CSS에서 BFC와 IFC의 활용에 대한 관련 정보를 주로 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금부터 공유하겠습니다. 그리고 참고용으로 주세요. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1 What is BFC

이전의 모든 블로그 게시물과 마찬가지로 What의 관점에서 소개부터 시작하여 BFC를 얕은 것부터 깊은 것까지 이해해 보겠습니다.

소위 서식 지정 컨텍스트는 W3C CSS2.1 사양의 개념입니다.

페이지의 렌더링 영역이며 일련의 렌더링 규칙이 있습니다.

하위 요소의 위치는 물론 다른 요소와의 관계 및 상호 작용도 결정합니다.

블록 형식 지정 컨텍스트(BFC, 블록 수준 형식 지정 컨텍스트)는 블록 수준 요소의 렌더링 및 표시 규칙입니다. 일반인의 관점에서 BFC는 컨테이너 내부의 하위 요소가 외부 요소에 영향을 주지 않는 커다란 닫힌 상자로 이해될 수 있으며 그 반대의 경우도 마찬가지입니다.

BFC의 레이아웃 규칙은 다음과 같습니다.

1 내부 상자는 수직 방향으로 하나씩 배치됩니다.
2 BFC는 페이지에서 격리된 독립 컨테이너입니다.
3 동일한 BFC에 속하는 두 개의 인접한 상자입니다. 위쪽 및 아래쪽 여백은 겹칩니다.
4 BFC의 높이를 계산할 때 부동 요소도 계산에 참여합니다.
5 부동 요소가 있더라도 각 요소의 왼쪽은 포함된 상자의 왼쪽과 접촉합니다.
6 BFC의 영역은 float와 겹치지 않습니다.

그럼 BFC를 트리거하는 방법은 무엇일까요? BFC 기능은 요소가 다음 조건 중 하나를 충족하는 한 트리거될 수 있습니다.

플로팅 요소: 없음이 아닌 부동 속성 값
절대 위치 요소: 위치 (절대, 고정)
디스플레이는 inline-block, table-cells, flex
표시 이외의 오버플로 값(숨김, 자동, 스크롤)
두 번째 BFC 특성 및 응용

1 동일한 BFC에 속하는 인접한 두 Box의 + 위쪽 및 아래쪽 여백이 겹치는 것으로 결정됩니다.

위 예에서 여백이 접히는 이유는 둘 다 body의 루트 요소에 속하기 때문입니다. 따라서 여백 접힘을 방지하려면 동일한 BFC에 속하지 않도록 해야 합니다.

<head>
.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;  
}  
</head>

<body>
   <p class="p"></p>  
   <p class="p"></p>  
</body>

로그인 후 복사

<p class="p"></p>  
<p class="wrap">  
  <p class="p"></p>  
</p>

로그인 후 복사

렌더링은 다음과 같습니다.

2 BFC는 플로팅 요소(클리어 플로트)를 포함할 수 있습니다.

일반적인 상황에서 플로팅 요소는 일반적인 문서 흐름에서 벗어나므로 다음 코드에서:

.wrap {  
  overflow:hidden;  

.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;

로그인 후 복사

외부 p는 내부 요소를 포함할 수 없습니다. 부동 p, 효과는 아래 그림에 표시됩니다.

그러나 BFC 사양의 4조에 따라 외부 컨테이너의 BFC를 트리거하면 BFC 높이를 계산할 때 부동 요소도 참여합니다. 계산에서 외부 p 컨테이너는 부동 요소를 래핑할 수 있으므로 다음과 같이 코드를 수정하면 됩니다.

<p style="border: 1px solid #000;">
    <p style="width: 50px; height: 50px; background: #eee;
               float: left;">
    </p>
</p>

로그인 후 복사

다음 효과를 얻으려면:

3 BFC는 요소가 부동 요소로 덮이는 것을 방지할 수 있습니다

먼저 예를 살펴보겠습니다.

<p style="border: 1px solid #000;overflow: hidden">
    <p style="width: 100px;height: 100px;background: #eee;float: left;"></p>
</p>

로그인 후 복사

효과 다이어그램은 다음과 같습니다.

그 이유는 위의 규칙 5 때문입니다. 각 요소의 왼쪽은 포함 상자의 왼쪽과 접촉합니다. 플로팅이 있는 경우

그래서 효과를 보완하고 간섭하도록 변경하려면 규칙 6을 사용해야 합니다. BFC의 영역은 플로트와 겹치지 않으므로

는 BFC의 속성, 즉

<p class="aside"></p>  
<p class="main"></p>  

p {  
  width:300px;  
}  
.aside {  
  width: 100px;  
  height: 150px;  
  float: left;  
  background: black;  
}  
.main {  
  height:200px;  
  background-color:red;  
}

로그인 후 복사

을 트리거할 수도 있습니다. 이러한 방식으로 두 열 레이아웃의 적응을 실현하는 데 사용할 수 있습니다.