前端精选文摘：BFC神奇背后的原理小科普：什么是BFC、IFC、GFC和FFC一：BFC（BlockFormattingContext）定义BFC的全称是BlockFormattingContext，翻译过来就是块级格式化上下文。BFC可以看作是一个隔离的独立容器（渲染区）。容器内部的元素在布局时不会影响外面的元素，相当于建立了一个无形的边界前提：每个渲染区域都由一个格式化上下文来表示，它决定了它的子元素将如何定位，以及它们之间如何关联并与其他元素互动。正常流程中的框属于块级格式化上下文或内联格式化上下文。2、BFC生成的根元素；float属性不是无；位置是绝对的或固定的；display是inline-block、flex或inline-flex；溢出是不可见的（visible）；三、特点BFC（blocklevelFormattingcontext）在渲染时遵循块级元素的布局规则：1、内部的Boxes会在垂直方向上依次放置。2.Box的垂直距离由margin决定。属于同一个BFC的两个相邻框的边距将与每个元素的边距框的左侧重叠，接触包含块边框框的左侧（对于从左到右的格式，否则反之亦然）。即使存在浮动也是如此。3、BFC区域不会与浮动框重叠。4、BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外面的元素。反之亦然。5、计算BFC的高度时，浮动元素也参与计算。 4.应用1.MarginMerge下图1中header和body之间差距较大的原因是：h1中有margin，与header的margin合并。但是为header建了一个BFC之后，margin就不会再合并了。剩余的间隙是主体的边距。取消body的margin后，gap就消失了。总结：（1）构建BFC是防止边距合并的方法之一（虽然添加borders和padding也可以实现边距合并）（2）使用overflow:hidden，超出内容就会被隐藏，慎用2。包含float，包裹浮动元素，先设置li为float，可以发现nav的高度没有被拉伸。当为nav形成bfc时，nav的高度被拉伸。在计算BFC的高度时，也可以使用浮动元素来组成BFC。但是如果只是为了撑起父元素，设置浮动是非常不明智的。
