CSS 레이아웃과 BFC에 대한 심층 분석

CSS 레이아웃에는 일단 이해하고 나면 CSS 레이아웃 능력을 실제로 향상시킬 수 있는 몇 가지 개념이 있습니다. 이 문서는 BFC(Block Formatting Context)에 관한 것입니다. 이 용어를 들어본 적이 없을 수도 있지만 CSS로 레이아웃을 해본 적이 있다면 아마도 이것이 무엇인지 알고 있을 것입니다. BFC가 무엇인지, 어떻게 작동하는지, BFC를 만드는 방법을 이해하는 것은 매우 유용합니다. CSS에서 무슨 일이 일어나고 있는지 이해하는 데 도움이 됩니다.

(추천 튜토리얼: CSS 튜토리얼)

이 글에서는 BFC가 무엇인지 익숙한 예시를 통해 설명합니다. 그런 다음 BFC가 무엇이고 왜 필요한지 이해하는 경우에만 의미가 있는 display에 대한 새 값을 명시합니다. display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。

什么是 BFC

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。如果我们有足够多的文本，它会环绕浮动的图像和边框，然后环绕整个区域。

// html
<p>
  </p><p>I am a floated element.</p>
  I am text inside the outer box.


// css
.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。

这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。

我们通常有两种方法来解决这个布局问题。一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。

.outer {
  overflow: auto;
}

查看演示：https://codepen.io/anon/embed/XzYWZj?height=500&theme-id=0&slug-hash=XzYWZj&user=&default-tab=

overflow 以这种方式工作的原因是，使用 visible 的初值以外的任何值都会创建一个块格式化上下文，而 BFC 的一个特性是它包含浮动。

BFC 是布局中的一个迷你布局

你可以将 BFC 看作是页面内的一个迷你布局。一旦一个元素创建了一个 BFC，它就包含了所有的内容。正如我们所看到的，这包括浮动的元素，它们不再从盒子底部伸出来。BFC 还会导致一些其他有用的行为。

BFC 可以防止 margin 折叠

了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 p。

这个 p 包含两个标签 p。外部 p 元素的 margin-bottom 为 40 像素，标签 p 的顶部和底部 margin 都是 20 像素。

// html
<p>
  </p><p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>

  
// css
.outer {
   background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

因为 p 元素的 margin 和外部 p 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 p 的顶部和底部齐平。 我们在 p

BFC란 무엇입니까

웹 페이지의 CSS 렌더링에서 블록 수준 서식 지정 컨텍스트(Block Fromatting Context)는 블록 수준 상자에 따라 배치됩니다. W3C는 BFC를 다음과 같이 정의합니다:

부동 요소 및 절대 위치 요소, 블록 수준 상자가 아닌 블록 수준 컨테이너(예: 인라인 블록, 테이블 셀 및 테이블 캡션) 및 오버플로 값 ​​​"표시"되지 않습니다. 블록 수준 상자는 콘텐츠에 대한 새로운 BFC(블록 수준 형식 컨텍스트)를 만듭니다.

BFC는 요소 레이아웃이 외부 세계의 영향을 받지 않는 독립적인 레이아웃 환경입니다. BFC에서는 블록 상자와 라인 상자(라인 상자는 행의 모든 ​​인라인 요소로 구성됨)가 수직으로 정렬됩니다. 상위 요소의 테두리입니다.

BFC(블록 서식 컨텍스트)의 동작은 간단한 float 예제를 통해 쉽게 이해할 수 있습니다. 아래 예에는 왼쪽에 떠 있는 이미지와 일부 텍스트가 포함된 상자가 있습니다. 텍스트가 충분하면 떠 있는 이미지와 테두리를 둘러싸고 전체 영역을 둘러쌉니다.

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

🎜🎜🎜 일부 텍스트를 제거하면 이미지를 둘러쌀 만큼 콘텐츠가 충분하지 않으며 플로트가 문서 흐름에서 제거되므로 테두리가 이미지 위아래, 텍스트 높이까지 올라갑니다. 🎜🎜🎜🎜이것 그 이유는 요소를 플로팅할 때 🎜text🎜가 위치한 상자의 너비는 변경되지 않고, 플로팅 요소를 위한 공간을 만들기 위해 텍스트의 줄 상자가 짧아지기 때문입니다. 이것이 플로트 뒤에 배경과 테두리가 나타나는 이유입니다. 🎜🎜이 레이아웃 문제를 해결하는 데는 일반적으로 두 가지 방법이 있습니다. 한 가지 방법은 텍스트에 작동하는 clearfix hack🎜을 사용하는 것입니다. 이미지 아래에 요소를 삽입하고 clear:both로 설정합니다. 대안은 기본 visible 이외의 값으로 overflow 속성을 ​​사용하는 것입니다. 🎜

<p>
  </p><p>I am a floated element.</p>
  <p>I am text</p>

🎜🎜🎜데모 보기: https://codepen.io/anon/embed/XzYWZj?height=500&theme-id=0&slug-hash=XzYWZj&user=&default-tab=🎜🎜overflow 이런 식으로 작동하는 이유는 visible의 초기 값이 아닌 다른 값을 사용하면 블록 형식화 컨텍스트가 생성되고 BFC의 특징은 부동 소수점을 포함한다는 것입니다. 🎜

BFC는 레이아웃 내의 미니 레이아웃입니다.

🎜BFC는 페이지 내의 미니 레이아웃이라고 생각하면 됩니다. 요소가 BFC를 생성하면 모든 콘텐츠가 포함됩니다. 보시다시피 여기에는 더 이상 상자 바닥에서 튀어나오지 않는 부동 요소가 포함됩니다. BFC는 또한 다른 유용한 동작으로 이어집니다. 🎜

🎜BFC는 여백 붕괴를 방지합니다. 🎜

🎜여백 병합을 이해하는 것은 과소평가된 CSS 기술 중 하나입니다. 다음 예에서는 배경색이 회색인 p가 있다고 가정합니다. 🎜🎜이 p에는 p 태그 두 개가 포함되어 있습니다. 외부 p 요소의 margin-bottom은 40픽셀이고 p 태그의 위쪽 및 아래쪽 margin은 모두 20픽셀입니다. 🎜

.text {
  overflow: auto;
}

🎜p 요소의 여백과 외부 p의 여백 사이에 아무 것도 없기 때문에 둘이 접히므로 p는 끝납니다. p의 상단과 하단을 플러시하세요. p 위와 아래에는 회색이 표시되지 않습니다. 🎜🎜🎜🎜🎜CSS에서는 두 개의 인접한 상자(형제 또는 조상일 수 있음)의 여백을 단일 여백으로 결합할 수 있습니다. 이러한 여백 병합 방법을 축소라고 하며 결과로 발생하는 여백을 축소된 여백이라고 합니다. 접기 결과는 다음 규칙에 따라 계산됩니다. 🎜

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

查看演示：https://codepen.io/anon/embed/YEvzRv?height=500&theme-id=0&slug-hash=YEvzRv&user=&default-tab=

再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。

BFC 可以阻止元素被浮动元素覆盖

你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。如果一个项目创建了一个 BFC，那么该项目将不会包裹任何浮动元素。在下面的例子中，有如下 html 结构：

<p>
  </p><p>I am a floated element.</p>
  <p>I am text</p>

带有 float 类的项被向左浮动，因此 p 中的文本在它环绕 float 之后。

我可以通过将包裹文本的 p 设置为 BFC 来防止这种包裹行为。

.text {
  overflow: auto;
}

这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。

查看演示：https://codepen.io/anon/embed/qVKEpJ?height=500&theme-id=0&slug-hash=qVKEpJ&user=&default-tab=

在多列布局中使用 BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

例如：

<p>
    </p><p>column 1</p>
    <p>column 2</p>
    <p>column 3</p>

对应的CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
  float: none;
}

未创建 BFC 之前：

添加以下样式创建一个 BFC:

.column:last-child {
  float: none;
  overflow: hidden; 
}

现在尽管盒子的宽度稍有改变，但布局不会打破。当然，对多列布局来说这不一定是个好办法，但能避免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案，但这个办法可以用来说明元素在这些环境下的行为。

还有什么能创建 BFC?

除了使用 overflow 创建 BFC 外，其他一些 CSS 属性还创建 BFC。正如我们所看到的，浮动元素创建了 BFC。你的浮动项将包含它里面的任何东西。

使用以下方式都能创建 BFC

• float 的值不是 none。
• position 的值不是 static 或者 relative。
• display 的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
• overflow 的值不是 visible

创建 BFC 的新方式

使用overflow或其他的方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。

这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。

即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?他们想要这个组件上的滚动条吗?

最安全的做法应该是创建一个 BFC 时并不会带来任何副作用，它内部的元素都安全的呆在这个迷你布局中，这种方法不会引起任何意想不到的问题，也可以理解开发者的意图。CSS 工作组也十分认同这种想法，所以他们定制了一个新的属性值：display:flow-root。

flow-root 浏览器支持情况

display:flow-root를 사용하면 위에서 언급한 다양한 문제(플로팅 요소 래핑, 여백 중첩 방지, 주변 플로팅 요소 방지)를 해결하기 위해 BFC를 안전하게 생성할 수 있습니다.

이 속성에 대한 브라우저 지원은 현재 제한되어 있습니다. 이 속성 값이 매우 편리하다고 생각하시면 Edge에서 이를 지원하도록 투표해 주세요. 그러나 어쨌든 이제 BFC가 무엇인지, 오버플로나 다른 방법을 사용하여 부동 소수점을 래핑하는 방법을 이해하고 BFC가 부동 소수점 요소를 둘러싸는 요소를 방지할 수 있다는 점을 알아야 합니다. 탄력적 레이아웃이나 그리드 레이아웃을 사용하려면 다음에서 수행할 수 있습니다. 다운그레이드 처리를 위해 BFC의 이러한 기능을 사용하도록 브라우저를 지원하십시오.

브라우저가 웹 페이지를 배치하는 방법을 이해하는 것은 매우 기본입니다. 때로는 대수롭지 않게 보일 수도 있지만, 이러한 작은 것들이 CSS 레이아웃을 생성하고 디버깅하는 데 걸리는 시간을 단축할 수 있습니다.

위 내용은 CSS 레이아웃과 BFC에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!