带你揭开BFC神秘的面纱
在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC。今天洛壹网络来为大家解析一下BFC，希望对各位新老朋友有所帮助。
一、定义
BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。
“A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.”
强行翻译一下吧，简单来说，这句话的意思就是：“一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素”
很显然，哪怕强行翻译了，大部分人依旧是看不懂这句话的。看都看不懂，那自然就没什么能把它说明白。talk is cheap, show me the code.看不懂意思，我用代码来给你演示。
<div class="box1"id="HM_bfc1">
<divclass="box2"></div>
<divclass="box3"></div>
<divclass="box4"></div>
<divclass="box5"id="HM_bfc2">
<divclass="box6"></div>
<divclass="box7"></div>
<divclass="box8"></div>
</div>
</div>
用这段代码来解释上面那段BFC定义的话，就应该是这个意思：#HM_bfc1是一块BFC区域，这块区域包含了box2、box3、box4、box5，也就是所有#HM_bfc1的子元素。同时#HM_bfc2也创造了一块BFC区域，包含了box6，box7，box8。注意，第一个box1的BFC，只包括box1的子元素box2345，不包括box678。#HM_bfc2这个BFC同样也仅仅是包括自己的子元素box678。
划重点
每一个BFC区域只包括其子元素，不包括其子元素的子元素。(这1点比较容易理解)
每一个BFC区域都是独立隔绝的,互不影响！(这点不太好理解，但是后续会使用代码验证)
看完上面的描述，很多朋友依旧不懂，把第2节用心的再读一遍，相信你会有新的收获。然后往下继续阅读，你会豁然开朗。
二、触发BFC
并不是任意一个元素都可以被当做BFC，只有当这个元素满足以下任意一个条件的时候，这个元素才会被当做一个BFC。
触发BFC的条件
• body根元素
• 设置浮动，不包括none
• 设置定位，absoulte或者fixed
• 行内块显示模式，inline-block
• 设置overflow，即hidden，auto，scroll
• 表格单元格，table-cell
• 弹性布局，flex
上代码说明
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<p>大佬说，关注涨5毛钱</p>
<p>大佬说，收藏涨8毛钱</p>
</div>
<div id="box4"></div>
</body>
首先, body元素是1个BFC，因为它满足我们的第1个条件(body根元素)，这个BFC区域包含子元素box1234，但是不包括两个p标签，需要注意的是，box3不是一个BFC区域，因为他不满足上面任意1个条件。如果我们希望box3也是1个BFC区域，只要让box3满足上面任意一个条件即可。
这个时候，box3元素被设置为了overflow为hidden，满足上面第5个条件，所以此时，box3就成为了一个BFC区域，这个BFC区域包含其所有子元素 – 两个p标签。
划重点
并不是所有的元素都是BFC, 只有满足了上面的任意1个条件之后，这个元素才成为1个BFC。
一个BFC区域，只包含其所有子元素，不包含子元素的子元素.
本文链接：https://www.looit.cn/news/details-12-679.html
版权声明：
1：本站所有内容均由互联网收集整理、上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途，如描述有误或者学术不对之处欢迎及时提出，不甚感谢。
2、 如涉及版权问题，请联系我们4724325@qq.com第一时间处理；
我们从以下三个方面，对比纯静态和伪静态两种静态页面生成方式，逐一展开分析。
用JS的正则表达式如何判断输入框内为中文或者是英文数字，或者是三者混编
css制作扇形
纯CSS3文字Loading动画特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和属性中添加了对多行和嵌套数组形状的完全支持：在这种情况下，可以使用数组形状注释定义数组结构，以获得键的代码补全并推断值的类型。
PHP作为Web界第一大语言近年来热度不够，但是这几年的进步和成长却没有中断。在2022伊始，我们来一起学习一下目前PHP的现状以及最新版本带来的特性。
Linux程序前台后台切换：在Linux终端运行命令的时候，在命令末尾加上 & 符号，就可以让程序在后台运行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正则表达式支持 多行模式，将每行文字分别匹配。然而各种操作系统里，换行符的表示法各不相同，会导致 Python 不能正确使用多行模式。