BFC란 무엇인가요? BFC에 대한 심층 분석

이 글의 내용은 BFC란 무엇인가요? BFC에 대한 심층 분석은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. BFC란 무엇입니까

형식 컨텍스트는 W3C CSS2.1입니다. 사양의 개념입니다. 이는 페이지의 렌더링 영역이며 하위 요소의 위치 지정 방법, 다른 요소와의 관계 및 상호 작용을 결정하는 일련의 렌더링 규칙이 있습니다. 가장 일반적인 형식화 컨텍스트에는 블록 형식화 컨텍스트(줄여서 BFC) 및 인라인 형식화가 포함됩니다. 컨텍스트(줄여서 IFC)입니다. 블록 형식화 컨텍스트는 말 그대로 "블록 수준 형식화 컨텍스트"로 번역됩니다. Block-level Box만이 참여하는 독립적인 렌더링 영역으로 내부 Block-level Box의 배치 방식을 규정하며 이 영역 외부와는 아무런 관련이 없습니다. 일반인의 관점에서 BFC는 블록 수준 요소를 관리하는 데 사용되는 컨테이너입니다.

2. BFC를 만드는 방법

• float는 왼쪽|right

• 오버플로는 숨겨짐|auto|scroll

• 디스플레이는 table-cell|table-caption|inline-block|inline- flex |flex

• 위치는 절대값입니다|fixed

• 루트 요소

3. BFC 레이아웃 규칙:

• 내부 상자는 수직 방향으로 하나씩 배치됩니다(예: 블록 레벨 요소를 자체 라인에 표시).

• BFC 영역은 플로트 상자와 겹치지 않습니다(적응형 2열 레이아웃을 얻으려면 이 기능을 사용하세요).

• 내부 Box의 세로 간격은 여유에 따라 결정됩니다. 동일한 BFC에 속하는 두 인접한 박스의 여백은 겹칩니다(마진 겹침에는 세 가지 조건이 있습니다: 동일한 BFC에 속함, 인접, 블록 수준 요소).

• BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다. (플로팅 해시 레이아웃 지우기)

• BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너의 하위 요소는 외부 요소에 영향을 주지 않습니다. 그리고 그 반대도 마찬가지입니다.

IV.BFC의 특징

특징 1: BFC는 세로 여백이 접히는 것을 방지합니다.

BFC의 정의에 따르면 동일한 BFC에 속할 경우에만 두 요소가 가질 수 있습니다. 수직 여백. 여기에는 인접한 요소나 중첩된 요소가 포함됩니다(예: 테두리, 비어 있지 않은 콘텐츠, 패딩 등).

①인접 형제 요소의 여백 겹침 문제

<style>
p{
        color: #fff;
        background: #888;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
  }
</style>

    <p>ABC</p>
    <p>abc</p>

위 예에서 두 P 요소 사이의 거리는 200px이어야 했지만 실제로는 100px에 불과해 여백 겹침이 발생했습니다. 이 상황에 어떻게 대처해야 할까요?
p 주위에 컨테이너를 감싸고 컨테이너를 트리거하여 BFC를 생성하기만 하면 됩니다. 그러면 두 P는 동일한 BFC에 속하지 않으며 마진 중복도 발생하지 않습니다.

<style>
p{
        color: #fff;
        background: #888;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
.wrap{
  overflow:hidden;
}
</style>

   <p>ABC</p>
  <div>
    <p>abc</p>
  </div>

2부모 요소와 자식 요소 사이의 여백이 겹치는 문제

<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
  background:yellow;
}
.wrap h1{
  background:pink;
  margin:40px;
}
</style>

<div>box</div>
<div>
  <h1 id="h">h1</h1>
</div>

이론적으로 위 그림의 Wrap 요소와 h1 요소 사이의 상하 여백 값은 40px이 되어야 합니다. , 그러나 실제로는 부모 요소와 자식 요소는 그렇지 않습니다. 여백 값이 없으며 동시에 두 p 요소 사이의 거리는 40px입니다. 이 상황에 어떻게 대처해야 할까요?
실제로 많은 처리 방법이 있습니다. 랩 요소에 오버플로: 자동을 추가하고, 테두리: 1px 솔리드 또는 패딩: 1px를 추가할 수도 있습니다. 상위 요소와 하위 요소 간의 여백 겹침 문제를 해결합니다.

기능 2: BFC는 부동 요소와 겹치지 않습니다.

이 기능을 사용하면

적응형 2열 레이아웃을 만들 수 있습니다.

<style>
.box1{
  height: 100px;
  width: 100px;
  float: left;
  background: lightblue;
}
.box2{width: 200px;
  height: 200px;
  background: #eee;
}
</style>

<div>我是一个左浮动的元素</div>
<div>喂喂喂!大家不要生气嘛，生气会犯嗔戒的。悟空你也太调皮了，
我跟你说过叫你不要乱扔东西，你怎么又……你看，我还没说完你就把棍子给扔掉了!
月光宝盒是宝物，你把它扔掉会污染环境，要是砸到小朋友怎么办，就算砸不到小朋友，
砸到花花草草也是不对的。</div>

위 그림에서는 플로팅 요소 주위에 텍스트가 배열되어 있지만 여기서는 분명히 우리가 원하는 것이 아닙니다. 이때 .box2 요소의 스타일에 Overflow:hidden을 추가하면 해당 콘텐츠가 외부 부동 요소에 미치는 영향을 제거할 수 있도록 BFC가 생성됩니다.

这个方法可以用来实现两列自适应布局，效果不错，此时左边的宽度固定，右边的内容自适应宽度。如果我们改变文字的大小或者左边浮动元素的大小，两栏布局的结构依然没有改变！

特性3：BFC可以包含浮动----清除浮动

我们都知道浮动会脱离文档流，接下来我们看看下面的例子：

<style>
.box1{
  width:100px;
  height:100px;
  float:left;
  border: 1px solid #000;
}
.box2{
  width:100px;
  height:100px;
  float:left;
  border: 1px solid #000;
}
.box{
  background:yellow
}
</style>

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

由于容器内两个div元素浮动，脱离了文档流，父容器内容宽度为零（即发生高度塌陷），未能将子元素包裹住。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

위 내용은 BFC란 무엇인가요? BFC에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!