BFC 모드에 대한 자세한 설명

이번에는 BFC 모드에 대해 자세히 설명드리겠습니다. BFC 모드 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

BFC에 대한 자세한 설명

BFC가 흔하다고 생각하지 않으실 수도 있겠지만, 아마 BFC를 사용하실 당시에는 전혀 생각하지 못하셨을 겁니다. 그럼 정확히 무엇인지 살펴볼까요?

공식 BFC 설명은 부동 요소와 절대 위치 요소, 블록 수준이 아닌 상자의 블록 수준 컨테이너(예: 인라인 블록, 테이블 셀 및 table-captions) 및 "visible" 이외의 오버플로 값을 가진 블록 수준 상자는 해당 콘텐츠에 대한 새로운 블록 수준 서식 지정 컨텍스트를 생성합니다. inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

上面反复提到了“ block formatting context”，显而易见BFC就是他们的缩写，官方还有”inline formatting context“，那也就是说”formatting context“我们需要仔细的看一下是什么意思，那我们就拆分来看看：

formatting：n，格式化的意思，v，使格式化( format的现在分词 ); 规定…的格式（或形状、大小、比例等）;
context：语境; 上下文; 背景; 环境;

放到一起的意思就是“格式化上下文”，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC.

Box也是比较重要的一个概念，Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box(即boxes)组成的。元素的类型和display属性，决定了这个Box的类型。 不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。

例如display属性值为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。 inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context

블록 수준 서식 지정 컨텍스트에서 상자는 포함 블록의 상단부터 시작하여 수직으로 하나씩 정렬됩니다. 두 상자 사이의 수직 간격은 여백 값에 따라 결정됩니다. 인접한 두 블록 수준 상자의 수직 여백이 겹칩니다.

블록 수준 서식 지정 컨텍스트에서 각 상자의 왼쪽 외부 가장자리(margin-left

)는 상자가 새로운 블록 수준 서식 컨텍스트를 생성하지 않는 한 부동 소수점이 존재하더라도 컨테이너의 왼쪽 가장자리(왼쪽 테두리)(또는 오른쪽에서 왼쪽 서식의 경우 오른쪽 가장자리)를 터치합니다.

"블록 형식 지정 컨텍스트"는 위에서 반복적으로 언급되었습니다. 분명히 BFC는 해당 약어입니다. 공식 항목에는 " 형식 지정"을 의미하는 "<code>인라인 형식 지정 컨텍스트"도 있습니다. context“무슨 뜻인지 좀 더 자세히 살펴볼 필요가 있으니, 분해해서 살펴보겠습니다.

formatting : n, 형식 지정의 의미, 형식(형식의 현재 분사)...의 형식(또는 모양, 크기, 비율 등)을 지정합니다.
컨텍스트 환경;

합쳐서 "포맷 컨텍스트"를 의미합니다. 이는 페이지의 렌더링 영역이며 하위 요소의 위치는 물론 다른 요소와의 관계 및 상호 작용을 결정하는 일련의 렌더링 규칙이 있습니다. 강요.

가장 일반적인 형식 지정 컨텍스트는 블록 형식 지정 컨텍스트(줄여서 BFC) 및 인라인 형식 지정 컨텍스트(줄여서 IFC)입니다. CSS2.1에는 BFC와 IFC만 있고 CSS3에는 GFC와 FFC가 추가되었습니다. Box도 상대적으로 중요한 개념입니다. Box는 직관적인 관점에서 보면 페이지입니다. 여러 개의 Box로 구성되어 있습니다. 요소 유형과 표시 속성에 따라 상자 유형이 결정됩니다. 다양한 유형의 Box는 다양한 서식 컨텍스트(문서 렌더링 방법을 결정하는 컨테이너)에 참여하므로 Box 내의 요소는 다양한 방식으로 렌더링됩니다. 예를 들어 표시 속성 값이 블록, 목록 항목 및 테이블인 요소는 블록 수준 상자를 생성합니다. 그리고 블록 형식화 컨텍스트에 참여합니다. 인라인 레벨 상자: inline, inline-block 및 inline-table 표시 속성이 있는 요소는 인라인 레벨 상자를 생성합니다. 인라인 서식 지정 컨텍스트에 참여합니다.

그럼 일반인의 관점에서 이해해 봅시다. BFC는 "블록 수준 서식 컨텍스트"를 의미합니다. BFC를 생성하는 요소는 독립적인 상자이지만 내부를 지정하는 BFC 생성에는 블록 수준 상자만 참여할 수 있습니다. 블록(Block) - 레벨 상자가 배치되는 방식과 이 독립 상자의 레이아웃은 외부의 영향을 받지 않으며 물론 외부 요소에도 영향을 주지 않습니다.

그럼 BFC 박스의 특징을 살펴보겠습니다.

1. 내부 박스는 위에서부터 수직 방향으로 하나씩 배치됩니다. 2. 상자의 수직 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 두 개의 인접한 상자의 여백은 겹칩니다. 3. 각 요소의 여백 상자 왼쪽은 포함 블록의 테두리 상자 왼쪽과 접촉합니다(왼쪽에서 오른쪽 형식의 경우 그렇지 않으면 반대임). 이는 float가 있는 경우에도 마찬가지입니다. 4. BFC 영역은 플로트 박스와 겹치지 않습니다. 5. BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않으며 그 반대도 마찬가지입니다.

6. BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다. 🎜🎜🎜🎜🎜🎜어떤 시나리오에서 BFC를 사용할 수 있나요? 🎜🎜🎜🎜🎜🎜1. 상자를 위아래로 배열하면 위쪽 상자가 🎜margin-bottom🎜:50px; 아래쪽 상자 🎜margin-top🎜:50; 그러면 두 상자를 중첩으로 계산하면 거리가 100px가 되어야 하는데 실제로는 두 개의 여백 값이 겹쳐서 50px만 남게 됩니다. 현재 BFC 모드를 실행하고 상자 중 하나에 상위 요소를 추가할 수 있습니다.

2. 레이아웃에 사용됨

플로팅이 있더라도 요소의 왼쪽 여백은 포함 블록 컨테이너의 외부 테두리에 닿게 됩니다. 그러면 이 방법을 사용하여 먼저 2열 레이아웃을 만들 수 있습니다. 첫 번째 상자는 부동이고 두 번째 상자의 왼쪽 여백이 할당됩니다.

float를 지우고

BFC 높이를 계산하는 데 사용됩니다
두 자식 간의 부동 관계로 인해 이를 발견했습니다. 요소 내부의 두 상자가 상위 요소와 분리되었습니다. 요소의 포함 블록에서 상위 요소의 높이가 축소되었습니다. 상위 요소에 두 개의 상자 하위 요소가 포함되도록 해야 높이를 계산할 수 있습니다. 두 개의 부동 하위 요소가 참여하므로 부동을 닫고 상위 요소의 BFC를 트리거해야 합니다. 예를 들어 Overflow:hidden;

더 흥미로운 정보를 보려면 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 자료:

css에서 속성 값 상속을 사용하는 방법

css로 점선 효과 만들기

CSS3 속성 전환, 애니메이션, 변형

위 내용은 BFC 모드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!