스타일을 작성할 때 우리는 기대에 부응하기 위해 스타일을 추가하거나 특정 속성을 수정하는 경우가 많습니다. 그리고 그 안에 BFC가 숨겨져 있습니다. 스타일을 수정하면 이를 깨닫지 못한 채 우연히 트리거될 수 있으므로 BFC의 마법을 깨닫지 못합니다. 이 기사에서는 CSS에 숨겨진 BFC를 공유하여 모든 사람에게 도움이 되기를 바랍니다.
1. BFC(Block Formatting Context)란 무엇인가
CSS 스타일을 작성할 때 요소에 CSS를 설정하려면 먼저 해당 요소가 블록 수준 요소인지 인라인 요소인지 알아야 하며, BFC는 블록 수준 상자를 포맷하는 데 사용됩니다.
형식 지정 컨텍스트: 페이지의 렌더링 영역을 나타내며 하위 요소의 위치는 물론 하위 요소의 상호 작용 및 다른 요소와의 상호 작용을 결정하는 일련의 렌더링 규칙이 있습니다.
BFC 정의: 블록 수준 서식 컨텍스트는 독립적인 블록 수준 렌더링 영역을 나타내며 블록 수준 상자만 참여합니다. 이 영역에는 블록 수준 상자의 레이아웃을 제한하는 일련의 렌더링 규칙이 있습니다. 해당 지역 밖에 있습니다. 할 일이 없습니다.
2. BFC의 세대
BFC가 렌더링 영역이라고 했는데, 이 렌더링 영역은 어디에 있으며 구체적인 크기는 얼마입니까? 이는 BFC를 생성하는 요소에 의해 결정됩니다.
다음 CSS 문 중 하나를 충족하는 요소는 BFC를 생성합니다.
1. 루트 요소 또는 이를 포함하는 기타 요소
2 float 값은 없음이 아닙니다. . 오버플로 값은 표시되지 않습니다.
5 위치 값은 인라인 블록, 테이블 셀, 테이블 캡션입니다. 6. 플렉스 박스(요소 표시: flex 또는 inline-flex)
참고: 일부 사람들은 display: table이 BFC를 생성할 수 있다고 생각합니다. 주된 이유는 table이 기본적으로 익명 테이블 셀을 생성하기 때문이라고 생각합니다. . 이 익명 테이블 셀이 BFC를 생성합니다.
3. BFC
의 레이아웃 규칙은 다음과 같이 간단하게 요약됩니다. 1 내부 요소는 BFC의 일반적인 흐름으로 이해될 수 있습니다. . 요소의 수직 방향 거리는 마진에 의해 결정됩니다. 즉, 동일한 BFC에 속하는 두 개의 인접한 상자의 마진은 겹칠 수 있습니다.
3 각 요소의 왼쪽 마진은 포함 블록의 왼쪽 경계와 접촉합니다. (왼쪽에서 오른쪽으로, 그렇지 않으면 반대) 이는 부동 소수점이 있는 경우에도 마찬가지입니다. 이는 BFC의 하위 요소가 포함 블록을 초과하지 않음을 의미합니다
4 BFC의 영역은 겹치지 않습니다. 플로트 요소의 면적과 함께5. BFC의 높이를 계산할 때 플로팅 하위 요소도 계산에 참여합니다 6. BFC는 페이지 내에서 독립된 하위 요소입니다. 외부 요소에는 영향을 미치지 않으며 그 반대도 마찬가지입니다
4. BFC의 응용
그렇게 말했지만 우리 BFC가 무슨 소용입니까? 아래에서는 몇 가지 문제를 해결하기 위해 몇 가지 예를 사용합니다.
예제 1. 여백 겹침 문제 해결
CSS를 플레이하는 친구들은 모두 여백 축소를 알고 있습니다. 즉, 인접한 수직 요소 뒤에 여백이 동시에 설정되어 있고, 실제 마진 값은 더 큰 값으로 축소됩니다. 기본 원칙은 동일한 BFC에 있다는 것입니다. 이는 "동일한 BFC에 속하는 두 인접 요소의 여백이 겹칩니다"라는 규칙을 따릅니다.
<span style="font-size: 14px;">margin重叠现象：<br><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <meta http-equiv="X-UA-Compatible" content="ie=edge"><br> <title>margin重叠现象</title><br> <style type="text/css"><br> *{margin: 0;padding: 0;}<br> .box p {<br> margin: 20px 0px;<br> background-color: skyblue;<br> }<br> </style><br></head><br><body><br> <p class="box" ><br> <p>Lorem ipsum dolor sit.</p><br> <p>Lorem ipsum dolor sit.</p><br> <p>Lorem ipsum dolor sit.</p><br> </p><br></body><br></html><br></span>로그인 후 복사
실험 결과 위쪽과 아래쪽 여백이 겹치는 것을 확인했습니다. 
요소 중 하나를 컨테이너로 감싸고 컨테이너를 트리거하여 BFC를 생성할 수 있습니다. 그러면 두 요소가 서로 다른 BFC에 속하므로 마진 겹침이 발생하지 않습니다.
다음과 같이 수정했습니다.
<span style="font-size: 14px;"><p class="box"><br> <p>Lorem ipsum dolor sit.</p><br> <p style="overflow:hidden;"><br> <p>Lorem ipsum dolor sit.</p><br> </p><br> <p>Lorem ipsum dolor sit.</p><br></p><br></span>
로그인 후 복사
overflow:hidden을 사용하여 BFC를 생성하고 여백 겹침 문제를 성공적으로 해결했습니다.
实例2、解决浮动问题
我们知道给父元素设置overflow:hidden可以清除子元素的浮动，但往往都不知道原理是什么。
其实这就是应用了BFC的原理：当在父元素中设置overflow:hidden时就会触发BFC，所以他内部的元素就不会影响外面的布局，BFC就把浮动的子元素高度当做了自己内部的高度去处理溢出，所以外面看起来是清除了浮动。
<span style="font-size: 14px;"><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <meta http-equiv="X-UA-Compatible" content="ie=edge"><br> <title>BFC浮动问题</title><br> <style><br> .one {<br> /* 文档流 里面的文字标签将父元素撑起来 */<br> background-color: pink;<br> }<br> .two {<br> float: left;<br> }<br> </style><br></head><br><body><br> <!-- 文档流 从上到下,当遇到float、position：absolute时，会离开文档流 --><br> <p class="one"><br> <p class="two">Hello World!</p><br> </p><br> 你好世界！<br></body><br></html><br></span>로그인 후 복사
我们做如下修改：
<span style="font-size: 14px;">.one {<br> background-color: pink;<br> overflow: hidden;<br> }<br></span>로그인 후 복사
对比发现，当我们一个元素设置成为BFC之后，计算BFC元素高度的时候，浮动元素也参与了计算。
实例3、解决侵占浮动元素的问题
我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。
<span style="font-size: 14px;"><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <meta http-equiv="X-UA-Compatible" content="ie=edge"><br> <title>BFC侵占浮动元素的问题</title><br> <style><br> .box1 {<br> float: left;<br> width: 100px;<br> height: 100px;<br> background-color: pink;<br> }<br> .box2 {<br> width: 200px;<br> height: 200px;<br> background-color: skyblue;<br> }<br> </style><br></head><br><body><br> <p class="box1">box1</p><br> <p class="box2">box2</p><br></body><br></html><br></span>로그인 후 복사
当一个元素浮动，另一个元素不浮动时，浮动元素因为脱离文档流就会盖在不浮动的元素上。
我们做如下修改：
<span style="font-size: 14px;">.box2 {<br> width: 200px;<br> height: 200px;<br> background-color: skyblue;<br> overflow: hidden;<br> }<br></span>로그인 후 복사
或如下修改：
<span style="font-size: 14px;">.box2 {<br> width: 200px;<br> height: 200px;<br> background-color: skyblue;<br> /* overflow: hidden; */<br> float: left;<br> } <br></span>로그인 후 복사
我们为非浮动元素建立BFC环境，根据BFC的不与float box重叠的规则，解决了侵占元素问题。
这一特性，我认为还是很有用的，特别是应用在两栏布局上，对比我们常规为非浮动元素或非定位元素设置margin来挤开的方法，其优点在于不需要去知道浮动或定位元素的宽度。
以上就是关于BFC的一些分析，BFC 是一种概念，是对前端布局技术的一种理论上的总结，掌握它可以让我们在使用CSS +p进行布局时，知道一些特殊操作以及规避问题的原理。BFC的概念比较抽象，但通过实例分析，有助于我们对BFC的理解。
相关推荐：
什么是BFC？对bfc的简单理解
关于BFC与高度塌陷的问题
BFC布局原理
위 내용은 CSS에 숨겨진 BFC의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
