【主要内容】
用法规则，如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）
【简介】
BFC（Block Formatting Context块级格式化上下文），它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。通俗理解为页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素
1、BFC布局规则
①内部的块级元素会在垂直方向，一个接一个地放置；
②块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
③每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；
④BFC的区域不会与float box重叠（所以可以解决浮动造成的重叠覆盖问题）；
⑤BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
⑥计算BFC的高度时，浮动元素也参与计算（所以可以消除浮动）
2、创建一个BFC
首先我们要知道怎样创建BFC。一个BFC可以被显式触发，只需满足以下条件之一：
float的值不为none；
overflow的值不为visible；
position的值为fixed / absolute；
display的值为table-cell / table-caption / inline-block / flex / inline-flex
3、BFC的应用
（1）消除margin合并
在之前文章里我写过相邻兄弟元素、父元素与第一个和最后一个子元素、空块元素的margin合并情况。那么对于发生margin合并的元素，我们怎样消除margin合并？
对于父子元素，我们可以通过设置padding、border、inline content、height、min-height、max-height等属性来消除；但是相邻的兄弟元素之间必出现margin合并，这时如果想要消除margin合并，又该怎么办？
我们首先要搞清楚为什么会发生margin合并
这些元素（包括兄弟、父子元素等）之间之所以会发生margin合并，是因为它们属于同一个BFC。所以，我们就知道怎么办了，只要让它们不属于同一个BFC不就可以了？
我们来举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bro1 {
width: 300px;
height: 200px;
background: #ddd;
margin-bottom: 30px;
}
.bro2 {
width: 200px;
height: 100px;
background: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class='bro1'></div>
<div class='bro2'></div>
</body>
</html>
结果显示为：30px；即合并后取了较大值----bor1的下外边距
【方案】
现在我们给.bro1新建一个BFC，并添加 overflow:hidden;
<div style="overflow:hidden">
<div class='bro1'></div>
</div>
至此，margin合并消除了！
（2）包含浮动子元素
这也是我们的主要议题——为什么"overflow:hidden"能清除浮动的影响？
我们经常会在父元素里设置某个子元素浮动。浮动后，子元素脱离了文档流，使得父元素无法包住这个浮动的子元素。
通常在父元素上设置一个clearfix的伪元素来清除浮动；同样，我们可以利用BFC可以包含浮动这一特性来清除浮动，例子已经在之前讲过
我们对之前的例子作一个分析：当给父级设置"overflow:hidden"时，实际上创建了一个超级属性BFC，此超级属性反过来决定了"height:auto"是如何计算的
因为在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素
（3）解决由于浮动造成的重叠覆盖问题
一般情况下，浮动元素会脱离文档流，即不占位置。它的兄弟元素会与它在左上角重叠。但是如果两个相邻元素都设置了浮动，那么意味着它们都是以BFC的规则渲染，根据上述第四条规则，BFC区域不会相互重叠，所以便能理解为什么设置浮动后元素能独占空间了
这里举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bro1 {
width: 200px;
height: 200px;
background: #ddd;
float: left;
}
.bro2 {
width: 200px;
height: 200px;
background: pink;
/*display: inline-block, table-cell, table-caption, flex, inline-flex;*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<div class='bro1'></div>
<div class='bro2'></div>
</body>
</html>
给元素添加以下属性，即可激活BFC（块级格式化上下文）
float属性不为none；position为absolute或fixed；display为inline-block, table-cell, table-caption, flex, inline-flex；overflow不为visible
【注意】
①除了设置"overflow:hidden"，我们还可以设置"display:inline-block"、"position:absolute"、"float:left"等方式来创建一个BFC，从而达到包裹浮动子元素的效果（具体使用哪种方法要看项目需求）
②IE6、7不支持伪元素，在IE6、7内有个hasLayout的概念，当元素的hasLayout属性值为true的时候会达到和BFC类似的效果。zoom:1 在IE6、7可以使hasLayout为true，所以如果清除浮动要兼容IE6、7，需要加上 zoom:1
③IE7及以下版本不支持BFC的，但有私有属性haslayout，于是我们可以通过触发元素的haslayout来达成bfc的相似效果
【拓展】
针对上面BFC布局规则第四条
④BFC的区域不会与float box重叠（所以可以解决浮动造成的重叠覆盖问题）；
这里详细介绍下：
<div>元素A</div> <div>元素B</div>
代码效果如图：
当你元素A添加float属性后，元素A脱离文档流
正常情况下，后面元素B会与前面的元素A重叠（因为float导致A元素脱离文档流不再占据原来的位置，后面元素会占据前面的位置，如图）
元素产生BFC的原因{
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
}
这个时候，我们任意选取上面一种原因加给元素B，比如加上overflow:hidden;
于是元素B 产生了BFC效果导致元素B收缩，不在占据元素A位置，如图
.
相关推荐
【CSS定位方案与Block Formatting Contexts (BFC)详解】 在网页设计中，CSS布局扮演着至关重要的角色。本文将深入探讨三种常见的定位方案：普通流、浮动和绝对定位，以及与之相关的Block Formatting Contexts (BFC)...
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
css-style一些容易混淆的排版问题 附带例子的解释1.BFC详解 2.CSS3详解 3.定位布局使用宽度为百分百超出屏幕宽度 4.水平垂直居中的方式 5.清除浮动 6.点击高亮模拟 7.版心布局 8.石老师的flex布局教程(实例篇) 9.石...
Ghost 各种参数详解 Ghost 是一个功能强大且灵活的硬盘克隆和复制工具，由 Binary 公司推出，后被 Symantec 公司购并，故后续版本称为 Norton Ghost。Ghost 能够帮助用户升级、备份和恢复整个磁盘或所选的分区，...
【知识点详解】 此文档标题和描述提及的是"成都市青羊、金牛、锦江七年级下期末B卷汇总自测+详解"，这显然是一份针对七年级学生的数学复习资料，包含了不同区域（青羊、金牛、锦江）的期末考试B卷的题目和解答解析...
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Ex10_86", "Ex10_86\Ex10_86.csproj", "{0CB5928E-A757-4B63-B700-D3F0B9A5BFC6}" EndProject Global GlobalSection(SolutionConfigurationPlatforms) = ...
### BFC概念详解 #### 一、BFC基础定义 BFC（Block Formatting Context），即块级格式化上下文，是指在CSS布局中一个独立的渲染区域，它遵循一套独立的渲染规则。当一个元素创建了一个新的BFC时，其内部的子元素将...
### 龙芯2H开发使用详解 #### 龙芯2H开发板介绍 龙芯2H开发板是一款基于MIPS（Microprocessor without Interlocked Pipeline Stages）架构的国产微处理器开发平台，其核心处理器采用了龙芯2号系列芯片。这款开发板...
**INF文件格式详解** INF文件是Windows操作系统中用于设备驱动程序和软件安装的重要脚本文件。这些文件包含了安装过程中所需的各种指令和配置信息，确保硬件或软件能够正确地与系统集成。本文将深入探讨INF文件的`...
【CSS知识点详解】 在面试中，CSS是必不可少的讨论话题，因为它在构建Web页面的视觉呈现和用户体验中扮演着核心角色。以下是对几个关键CSS概念的深入解释： 1. **WEB标准与W3C理解**： - **WEB标准**是指一系列...
### 前端基础知识点详解 #### CSS布局与定位技巧 **一、左右布局与居中技巧** 在前端开发过程中，经常会遇到需要实现特定布局的需求，例如左侧固定宽度，右侧自适应；或者两侧固定宽度，中间自适应的情况。这里...
Position 属性详解： Position 属性有四个常见的属性值：relative, absolute, fixed, static。 1. Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、...
- 使用`overflow:hidden`，也可以创建BFC，但可能会影响布局。 - 利用`:after`伪元素，通过触发`hasLayout`（在IE6中）来清除浮动。 - 父元素也浮动，但这种方法并不常用。 - 使用`display`属性，如`display:...
"HTML 面试题及答案详解" 本文档主要讲解了 HTML 中的一些常见问题和答案，涵盖了 HTML 的基本概念、CSS 属性、布局方式等方面。 一、垂直水平居中 如何让一个不定宽高的 DIV 垂直水平居中？可以使用 CSS 方法，...
- 使用`overflow:hidden`：在父元素上设置`overflow:hidden`可以触发块级格式化上下文（BFC），从而包含浮动子元素。 - 使用CSS Flexbox或Grid布局：这两种现代布局模型提供了更强大的控制力，可以避免许多与浮动...
Linux运维共208讲(初级+中级+高级+必备软件+PPT) 百度网盘下载地址：https://pan.baidu.com/s/1uGW6WlFpT7bFC1m8vPI2GQ
【前端开发面试题详解】 1. **网络请求过程** 当用户输入网址并按下回车键，会经历以下步骤： a. **域名解析**：系统查找 DNS 服务器，将域名转换为 IP 地址。 b. **TCP 三次握手**：客户端向服务器发起连接请求...
【知识点详解】 1. 四边形性质： - 平行四边形的性质：对角线互相平分但不一定相等。选项A错误，因为对角线相等的四边形不一定是平行四边形，可能是矩形或等腰梯形。 - 矩形的性质：对角线相等且互相平分。选项B...
最近复习了一下CSS相关的知识点，对于CSS中经典的边距重叠问题进行了梳理总结，目的是检验复习效果，也希望对他人有所帮助，疏漏之处还请各位前端老鸟们不吝赐教。 提出问题：在使用CSS排版布局时，会发现兄弟或者...
通过设置`overflow:auto`或`overflow:hidden`，可以触发BFC（块格式化上下文），从而解决塌陷。`overflow:auto`可能会显示滚动条，影响视觉效果；而`overflow:hidden`则可能导致部分内容被隐藏，需谨慎使用。 4. *...