CSS3의 BFC는 무엇입니까

CSS3에서 BFC의 중국어 의미는 "Block Formatting Context"이며, 이는 웹 페이지의 시각적 CSS 렌더링의 일부이며, 블록 상자의 레이아웃 프로세스가 발생하는 영역이기도 합니다. 플로팅 요소가 다른 요소와 상호 작용하는 경우. 간단히 말해서 BFC는 페이지에서 격리되고 독립적인 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않습니다. BFC의 기능: 1. 여백 접기 문제를 해결합니다. 2. BFC 영역은 플로팅 요소 영역과 겹치지 않으며 CSS에서 일반적으로 사용되는 2열 레이아웃을 생성할 수 있습니다. 3. 요소 내부의 플로트를 지웁니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. BFC란 무엇입니까

공식 정의: BFC(Block Formatting Context) 블록 서식 컨텍스트는 웹 페이지의 시각적 CSS 렌더링의 일부이며 블록 상자의 레이아웃 프로세스가 발생하는 영역입니다. 이며 부동 요소이기도 합니다. 요소가 다른 요소와 상호 작용하는 영역입니다.

인간의 관점에서: BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않습니다. 우리는 BFC를 자주 사용하지만 그것이 BFC인지는 모릅니다.

2.BFC 생성 방법

일반적으로 사용되는 방법은 다음과 같습니다.

• Floating 요소(요소의 float가 none이 아닌 경우 float를 지정하여 BFC를 생성할 수 있습니다. 왼쪽 또는 오른쪽) none，指定float为left或者right就可以创建BFC）
• 绝对定位元素（元素的 position 为 absolute 或 fixed
절대적으로 배치된 요소(요소의 위치는 절대 또는 고정임)
• display:inline-block, display:table-cell, display:flex, display:inline-flex
• overflow는 visible

이외의 값을 지정합니다. 보세요. 위에 나열된 속성이 코드에서 자주 사용됩니까? , 하지만 당신은 그것이 단지 BFC라는 것을 모릅니다.

3. BFC의 특징은 무엇인가요

• BFC에서는 블록 레벨 요소가 위에서부터 수직으로 하나씩 배열됩니다. (물론 블록 수준 요소는 BFC에 없더라도 수직으로 배열됩니다.)
• 두 블록 수준 요소가 동일한 BFC에 속하면 위쪽 및 아래쪽 여백 중 더 큰 쪽이 겹치거나 접힙니다. . 그러나 두 개의 블록 수준 요소가 서로 다른 BFC에 있는 경우 위쪽 및 아래쪽 여백은 겹치지 않고 둘의 합이 됩니다.
• BFC 영역은 플로팅 요소 영역과 겹치지 않습니다
. 즉, 플로팅 상자와 교차하지 않지만 플로팅 가장자리에 달라붙습니다.
• BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다. BFC에는 부동 요소가 포함될 수 있습니다. (플로트를 지우려면 이 기능을 사용하세요.)
• BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너의 하위 요소는 외부 요소에 영향을 주지 않습니다.

4. BFC의 용도

1. 마진 붕괴 문제 해결

마진 붕괴는 동일한 BFC에 속한 블록 수준 요소 사이에서만 발생합니다.

html:

<div class="div1"></div>
<div class="div2"></div>

css:

.div1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin-bottom: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

첫 번째 div의 margin-bottom을 10px로 설정하고 두 번째 div의 margin-top을 20px로 설정하면 두 상자의 최종 여백이 20px임을 알 수 있습니다. 둘 중 더 큰 것. 마진이 겹치는 문제입니다.

이 문제를 해결하기 위해 두 div를 서로 다른 BFC에 속하게 하거나 div 중 하나를 BFC에 넣을 수 있습니다. 그 이유는 BFC가 페이지에서 분리된 독립 컨테이너이고 컨테이너 내부의 요소가 외부 세계에 영향을 미치지 않기 때문입니다.

html:

<div>
  <div></div>
</div>
<div></div>

css:

.wrapper{
  /* 开启BFC */
  overflow: hidden;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin-bottom: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

현재 코드로 여백이 겹치는 문제를 해결할 수 있습니다! 그러나 우리의 경우 위치 속성을 절대 및 고정으로 지정하거나 부동 소수점을 왼쪽 또는 오른쪽으로 지정하여 BFC를 생성할 수 있지만 이 요소는 현재 문서 흐름에서 제거되고 페이지 공간을 차지하지 않으며 다음 작업을 수행할 수 있습니다. 다른 요소와 겹쳐서 결합됩니다. 결과적으로 하위 div가 상위 div를 덮게 됩니다.

2. 2단 레이아웃을 만듭니다

BFC 영역은 플로팅 요소 영역과 겹치지 않습니다.

이 기능을 사용하면 CSS에서 일반적으로 사용되는 2열 레이아웃(왼쪽은 고정 너비, 오른쪽은 적응형 너비)을 만들 수 있습니다. ㅋㅋㅋ 상위 요소, 다른 요소가 떠 있지 않으면 두 번째 상자가 첫 번째 상자 아래 부분적으로 덮이게 됩니다(그러나 텍스트는 덮이지 않습니다).

효과는 그림과 같습니다.

두 번째 요소에 BFC를 설정합니다.

<div></div>
<div></div>

효과는 그림과 같습니다.

3、清除元素内部的浮动

这里清除浮动的意思并不是清除你设置的元素的浮动属性，而是清除设置了浮动属性之后给别的元素带来的影响。例如我们给子元素设置浮动，那么父元素的高度就撑不开了。

BFC有一个特性：计算BFC的高度时，浮动元素也参与计算，利用这个特性可以清除浮动。

html：

<div>
  <div>a</div>
  <div>b</div>
</div>

css：

.div1 {
  width: 150px;
  border: 1px solid red;

  /*使用BFC来清除浮动*/
  overflow: hidden;
}

.son1, .son2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}

.son2 {
  background-color: greenyellow;
}

（学习视频分享：web前端入门）

위 내용은 CSS3의 BFC는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!