带你揭开BFC的神秘面纱 1.引言在前端的布局手段中

1. 引言在前端的布局手段中，一直有这么一个知识点，很多前端开发者都知道有它的存在，但是很多人也仅仅是知道它的存在而已，对它的作用也只是将将说得出来，可是却没办法说得非常的清晰。这个知识点，就是BFC 。想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display ，三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。你只有熟练掌握了这些布局手段之后，才能很好的理解BFC 。今天这篇文章，来大家解析一下BFC ，希望对各位新老朋友有所帮助。
2. 定义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.看不懂意思，我用代码来给你演示。
【带你揭开BFC的神秘面纱】用这段代码来解释上面那段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节用心的再读一遍，相信你会有新的收获。然后往下继续阅读，你会豁然开朗。
3. 触发BFC

并不是任意一个元素都可以被当做BFC ， 只有当这个元素满足以下任意一个条件的时候 ， 这个元素才会被当做一个BFC 。

触发BFC的条件

body根元素
设置浮动，不包括none
设置定位， absoulte或者fixed
行内块显示模式， inline-block
设置overflow ，即hidden ， auto ， scroll
表格单元格， table-cell
弹性布局， flex

上代码说明

文章插图
首先, body元素是1个BFC ，因为它满足我们的第1个条件(body根元素) ，这个BFC区域包含子元素hm1234 ，但是不包括两个p标签，需要注意的是， hm3不是一个BFC区域，因为他不满足上面任意1个条件。如果我们希望hm3也是1个BFC区域，只要让hm3满足上面任意一个条件即可。