网站首页 > 技术文章正文

如何理解块级格式化上下文BFC(block formatting context)?

hmc789 2024-11-26 03:35:07 技术文章 2 ℃

首先，我们需要说明一下，什么是BFC呢？我们去MDN文档先去看看，官方文档是怎么定义的呢？BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。相信大家，对这个还是有一些云里雾里的。那我们继续在讲解一下，用代码来实现，你就明白。

块格式化上下文对浮动定位都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。来，一起看看下面的代码用例。

一、让浮动内容和周围的内容等高

在下面的例子中，我们让 <div> 元素浮动，并给它一个边框效果。<div> 里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 <div> 的边框穿出了浮动。浮动脱离了文档流，所以 <div> 的background

和 border 仅仅包含了内容，不包含浮动。

二、使用overflow: auto

创建一个会包含这个浮动的 BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值

设置 overflow: auto 创建一个新的BFC来包含这个浮动。我们的 <div> 元素现在变成布局中的迷你布局。任何子元素都会被包含进去。

使用 overflow 来创建一个新的 BFC，是因为 overflow 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建 BFC 的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影。

三、使用display: flow-root

一个新的 display 属性的值，它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。

给 <div> display: flow-root 属性后，<div> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。

关于值 flow-root 的这个名字，当你明白你实际上是在创建一个行为类似于根元素（浏览器中的<html>元素）的东西时，就能发现这个名字的意义了——即创建一个上下文，里面将进行 flow layout。

四、外边距塌陷

创建新的BFC避免两个相邻 <div> 之间的外边距合并问题

那么，相反，如果不创建相邻的<div>那就会导致——块格式上下文会导致边距崩溃，在正常流动中，盒子从容纳块的顶部开始一个接一个地垂直放置。两个兄弟箱之间的垂直距离由两个兄弟的各个边距确定，但不是两个边距的总和。

结论

以上就是BFC的分析，BFC的概念比较抽象，但通过实例分析应该能够更好地理解BFC。在实际中，利用BFC可以闭合浮动。同时，由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。