BFC（Block Formatting Context）是CSS布局中的重要概念，它决定了块级元素如何在其区域内布局以及如何与浮动元素交互。BFC特性包括避免margin重叠、计算高度包含浮动元素、防止元素重叠等，常用于解决布局问题。创建BFC的方式包括浮动、绝对定位、overflow不为visible等。理解BFC可以帮助开发者更好地控制页面布局和解决样式冲突。
BFC 即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。
盒模型：
CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。
两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：
- 标准盒模型：只包含
content。 - IE（替代）盒模型：
content + padding + border。
可以通过 box-sizing 来改变元素的盒模型：
box-sizing: content-box：标准盒模型（默认值）。box-sizing: border-box：IE（替代）盒模型。
BFC 具有一些特性：
- 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
- 在 BFC 中上下相邻的两个容器的
margin会重叠，创建新的 BFC 可以避免外边距重叠。 - 计算 BFC 的高度时，需要计算浮动元素的高度。
- BFC 区域不会与浮动的容器发生重叠。
- BFC 是独立的容器，容器内部元素不会影响外部元素。
- 每个元素的左
margin值和容器的左border相接触。
利用这些特性，我们可以解决以下问题：
- 利用
4和6，我们可以实现三栏（或两栏）自适应布局。 - 利用
2，我们可以避免margin重叠问题。 - 利用
3，我们可以避免高度塌陷。
创建 BFC 的方式：
- 根元素（
<html>） - 浮动元素（
float不为none） - 绝对定位元素（
position为absolute或fixed） - 表格的标题和单元格（
display为table-caption，table-cell） - 匿名表格单元格元素（
display为table或inline-table） - 行内块元素（
display为inline-block） overflow的值不为visible的元素- 弹性元素（
display为flex或inline-flex的元素的直接子元素） - 网格元素（
display为grid或inline-grid的元素的直接子元素）
参考文章：可能是最好的BFC解析了...
扫一扫
6204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
