찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

青灯夜游
青灯夜游앞으로
2022-07-08 11:29:005823검색

BFC란 무엇인가요? 다음 기사에서는 BFC를 이해하고 BFC의 역할에 대해 이야기합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

바이트 인터뷰를 하던 중 면접관님이 저에게 BFC에 대해 아시나요? 사실 당시 기사를 많이 읽었는데 기억이 나지 않더라고요. 그때 인터뷰를 했는데 당시에는 대답을 못했는데 왕홍원 선생님의 설명을 듣고 깨달음을 얻은 느낌이 들어서 여러분과 공유하고 싶었어요. 다음 내용은 Wang Hongyuan 선생님의 프론트엔드 시스템 수업 내용을 요약한 것입니다. 정말 감사합니다. Wang Hongyuan 선생님

이해하기 전에 BFC(Block Formatting Context)를 살펴보겠습니다. FC(Formatting Context) Context):

BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

이 구절은 W3C 공식 웹사이트에서 가져온 것입니다:

  • 모든 상자는 FC

  • 에 속합니다. -level 요소는 BFC에 속합니다. 예를 들어 div/p/h1 등 -> BFC 레이아웃의

  • 인라인 수준 요소 레이아웃은 IFC에 속합니다. 예를 들어 img/a/span/i -> IFC 레이아웃에서 간단히 이해하면 블록 수준 요소가 있는 레이아웃과 컨텍스트는 BFC이고 인라인 수준 요소가 있는 레이아웃과 컨텍스트는 IFC

    • 입니다.
질문 1. 블록 레벨 요소는 모두 BFC에 배치되어 있는데 이 BFC는 어디에 있습니까? 우선 W3C의 공식 설명을 살펴보겠습니다.

MDN에 정리된 상황에 따르면, BFC 생성됩니다:

루트 요소(html)

BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.플로팅 요소(요소의 부동 소수점 값은 없음이 아님)

절대적으로 배치된 요소(요소의 위치는 절대 또는 고정)

    인라인 블록 요소(요소의 표시는 인라인입니다. -block)
  • 테이블 셀(요소 표시는 table-cell, HTML 테이블 셀의 기본값은 이 값, 테이블 제목(요소의 표시는 table-caption, HTML 테이블 제목의 기본값은 이 값) row, tbody, thead, tfoot 기본 속성) 또는 inline-table)
  • 오버플로 계산된 값(계산됨)이 표시되지 않는 블록 요소
  • Flexible 요소(디스플레이는 flex 또는 inline-flex 요소의 직접 하위 요소)
  • Grid 요소(디스플레이는 직접 그리드 또는 인라인 그리드 요소의 하위) 요소)
  • flow-root 값이 있는 표시 요소
  • 볼 수 있습니다
    • <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>
  • 이 코드의 box1과 box2는 모두 html 루트 요소의 BFC에 배치되어 있습니다
    • 질문 2. BFC의 역할

우선 BFC의 역할에 대한 공식 문서의 설명을 살펴보겠습니다.

우리가 얻을 수 있는 정보:

BFC에서는 상자는 포함 블록의 상단에서 시작하여 수직 방향으로 차례로 배치됩니다. 많은 사람들이 이러한 관점에 익숙할 수 있지만 이것이 바로 BFC가 우리가 달성하도록 돕는 것입니다. 상자에 대한 여백 상단을 설정할 때 BFC는 이를 구문 분석하는 데 도움을 준 다음 상자가 배치될 때 상단 여백을 제공합니다BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

BFC에서 각 요소의 왼쪽 가장자리는 포함하는 요소에 가깝습니다. 블록의 왼쪽 가장자리

    • 동일 BFC에서 세로 방향으로 인접한 두 상자의 여백이 겹쳐지며 값은 둘 중 더 커집니다(이 기능을 사용하여 여백을 해결할 수 있습니다) 겹침 문제)

  • 함수 1: BFC를 사용하여 여백 겹침 문제 해결

    nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  
  
    <div></div>
    <div></div>
  
    이때 box1과 box1은 모두 html의 BFC에 있고 box1과 box2는 세로 방향으로 인접해 있으며, 그래서 마진이 겹칠 것입니다. 두 개를 가져가세요. 더 큰 값은 50px

어떻게 해결하나요?

많은 사람들이 BFC를 box1에 직접 추가하는 것을 생각할 수 있으므로 box1에 직접 Overflow:hidden 속성을 추가

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;

        overflow: hidden;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

결과는 무엇입니까? BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

작동하지 않는 것으로 나타났습니다. 이때 많은 분들이 헷갈리실텐데요. Box1은 이미 BFC를 형성했는데 왜 아직도 중복되나요? 먼저 설명하자면, box1은 실제로 이때 BFC를 형성했지만(box1 내부에 형성된 BFC로 이해될 수 있음), box1 요소 자체는 여전히 box2와 동일한 html의 BFC에 속하므로 여전히 마진 겹침이 발생합니다

그래서 box1에 레이어를 추가한 다음 box1의 외부 상자에 BFC를 설정해야 합니다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 给box1外层增加一个container盒子，并设置BFC */
      .container {
        overflow: hidden;
      }
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
    </div>
    <div></div>
  </body>
</html>

이 때 box1은 컨테이너의 BFC에 속하고 box2는 BFC에 속합니다 동일한 BFC에 속하지 않는 html이므로 여백 겹침 문제를 해결할 수 있습니다BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

作用2：解决浮动高度塌陷问题

当我们给container里面的四个item设置浮动的时候，很明显，这几个元素都会脱离文档流，此时container不会有高度

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  
  
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  

BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

很多网上博主说，通过给container设置一个BFC，内部的浮动元素就会向其汇报高度，然后container就能解决浮动高度塌陷问题，这个做法是正确的，但是这个说法其实是错误，并不是因为其内部的浮动元素向其汇报了高度

事实上，想通过BFC解决高度塌陷问题需要满足两个条件：

  • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文(BFC)

  • 浮动元素的父元素高度为auto

首先我们先看一段W3C的描述

BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

大致意思为BFC的高度是auto情况下，高度是这样计算：

  • 如果只有inline-level，是行高的顶部和底部的距离
  • 如果有block-level，是有最底层的块上边缘和最底层块盒子的下边缘之间的距离（有margin也会计算在内）
  • 如果有绝对定位元素，将被忽略（所有我们无法通过BFC解决绝对定位的高度塌陷问题）
  • 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘（这才是BFC能解决浮动元素塌陷问题的原因，并不是因为浮动元素向上汇报了高度）

所以我们直接给container通过添加overflow属性设置BFC，则由于上述第四条4特性，container会增加高度来包括内部四个item浮动元素下边缘，所以解决了浮动塌陷问题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
        /* 通过overflow形成BFC */
        overflow: hidden;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.

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

위 내용은 BFC란 무엇인가요? BFC에 대해 자세히 알아보고 BFC의 역할에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html Float auto display position overflow margin flex table tbody
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：실제 CSS3 애니메이션: 매우 멋진 끈적이는 버블 효과다음 기사：실제 CSS3 애니메이션: 매우 멋진 끈적이는 버블 효과

관련 기사

더보기