什么是BFC？

W3C官方定义：它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候BlockFormatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局

 

用人话解释：BFC的目的就是形成一个完全独立的空间，让空间里的子元素不会影响到外面的布局

 

我们通过为元素设置一些CSS属性就能触发这一空间，而最最最常用的触发规则有四种：

1.float不为none

2.position不为relative和static

3.overflow为auto scroll和hidden

4.display的值为table-cell或inline-block

 

BFC可以解决的布局问题

第一种：解决浮动元素令父远素高度塌陷的问题

如果父级没有设置高度，子盒子设置浮动， 此时父盒子的高度就会塌陷变为0，影响下面标准流元素的布局,此时我们就应该清除浮动了。

触发BFC可以达到清除浮动的目的。

触发了BFC的容器就是页面上的一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的父元素在计算高度时不得不让浮动的子元素也参与进来，变相地实现了清除内部浮动的目的。

 

但有的时候出于布局需要也可能无法给父元素设置这些能够触发BFC的属性，采用非BFC方法也是能解决问题的，也就是说BFC只是解决的问题的一种途径而已并不是必需的方法。

具体使用哪种，根据实际需求来决定。

 

第二种：解决自适应布局的问题

PC端的网页像这样的两栏布局非常常见

一般需要左侧边栏定宽右侧主体随项面宽度自适应变化，通常是用浮动来实现的利用块级元素会尽可能占满一行的特性使得右边的元素可以随着页面宽度变化而变化，又利用了浮动的特性让左侧元素覆盖在右边元素的上方，同时还能挤开下方元素里的内容让项面看起来是两栏的效果。

但随着右边元素里文字增加超出了左边元素的高度之局文字就会流动到最左侧看起来就是文字环绕左侧元素。

如果这不是你希望的效果。

这里可以为右侧示素触发BEC，触发了BFC的容器就是页面上的一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素。

为了保证这个规则触发了BFC的右侧元素为了将内部元录和左侧浮动元表隔离开来不得不形成这样左右完全隔离的两栏，同时如果有侧元表依旧是块级元素，那么他尽可能占满一行的特性还在这样就保证了右侧元素依旧是自适应的。

当然以下一些方法也能实现布局需要：

第三种：解决外边距垂直方向重合问题（外边距塌陷问题）

外边距塌陷问题也就是兄弟元素之间的外边题在垂宜方向上会取最大值而不是取和。

举个栗子：

本来期望它们在垂直方向上的距离福加起来应该是40像素但实际上只有20像素

那么我们可以通过触发BFC来防止它们之间相互影响

比如为其中一个口元素的外面包裹一层父元素并且触发父元素BFC比如：overflow：hidden；

同样的我们还有非BFC解决方案用如padding来替代margin

 

总结：

触发BFC的属性有很多，但是选择要慎重，要考虑到实际的情况，避免影响到其他元素的布局，比如说，用Float触发BFC的时候就要注意Float可能对布局产生的影响所以一定要想清楚，用什么样的方式去触发它。

 

参考：果冻公开课——如何快速理解BFC

https://www.bilibili.com/video/BV16b411H7Pz