CSS에 숨겨진 BFC-CSS 튜토리얼-php.cn

스타일을 작성할 때 우리는 기대에 부응하기 위해 스타일을 추가하거나 특정 속성을 수정하는 경우가 많습니다. 그리고 그 안에 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>

로그인 후 복사

실험 결과 위쪽과 아래쪽 여백이 겹치는 것을 확인했습니다. CSS에 숨겨진 BFC

CSS에 숨겨진 BFC 요소 중 하나를 컨테이너로 감싸고 컨테이너를 트리거하여 BFC를 생성할 수 있습니다. 그러면 두 요소가 서로 다른 BFC에 속하므로 마진 겹침이 발생하지 않습니다.

다음과 같이 수정했습니다.

CSS에 숨겨진 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>

로그인 후 복사

CSS에 숨겨진 BFC

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>

로그인 후 복사

CSS에 숨겨진 BFC

我们做如下修改：

<span style="font-size: 14px;">.one {<br>        background-color: pink;<br>        overflow: hidden;<br>    }<br></span>

로그인 후 복사

CSS에 숨겨진 BFC

对比发现，当我们一个元素设置成为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>

로그인 후 복사

CSS에 숨겨진 BFC

当一个元素浮动，另一个元素不浮动时，浮动元素因为脱离文档流就会盖在不浮动的元素上。

我们做如下修改：

<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>

로그인 후 복사

CSS에 숨겨진 BFC