前端程序员在布局页面时，经常会遇到各种烦人的小问题，比如：每个元素都是一个盒子，盒子外的父元素应该不会受到盒内子的子元素影响，可是事实是这样的吗？
往往，我们会看到子元素浮动后，父元素高度没有了，两栏布局时右侧没有自适应，垂直方向上上下两个元素外边距不太对
从常理上来说，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此，那么有没有什么办法能让里面的元素和外部真正隔离开呢？
==> 解决办法就是：BFC
BFC = Block Formatting context 意思是“块级格式化上下文”，W3C的解释是：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
其实，我们只要记住：BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？我们通过CSS为元素设置一些属性，就能触发，常用的有四种：
- float不为none
- postion不为relative和static
- overflow为auto scroll和hidden
- display的值为inline-block
在知道触发规则之后，我们再来看下能解决什么问题呢？
- 解决浮动元素令父元素高度塌陷的问题
如，父元素div包含几个子div，这几个子元素都为浮动时，父元素高度坍塌，这是因为浮动的子元素脱离了文档流，漂浮于父元素之上，父元素检测不到子元素的存在，获取不到子元素高度，所以看起来父元素没有高度了。父元素后面的布局也就乱了，这时，可以给父元素添加属性overflow：hidden，当然，这只是一种BFC的做法，还可以display: table-cell;或position: fixed;或position: absolute;
触发了BFC的容器就是页面上的一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的父元素在计算高度时，不得不让浮动的子元素也参与进来，变相的实现了清楚内部浮动的目的。
但有的时候出于布局需要也可能无法给父元素设置这些属性，解决高度坍塌还有让父元素也浮动起来，或添加一个高度，但这种适用于已知道子元素高度
解决自适应布局的问题
PC端的网页，左右两栏布局很常见，一般左侧定宽，右侧主体页面宽度自适应变化，通常是用浮动来实现的；它利用了块级元素占满一行的特性，使得右边的元素可以随着页面宽度的变化而变化，又利用了浮动的特性，让左侧元素覆盖在右侧元素上方，同时还能挤开下方元素的内容，让页面看起来是两栏的效果，但随着右边元素的增加，超出了左边元素的高度后，文字就会环绕左侧元素，这显然不是我们想要的效果，因为右侧元素触发了BFC，触发BFC的容器就是页面上的一个完全隔离开的容器，容器中的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的右侧元素为了将内部元素和左侧浮动元素隔离开，不得不形成这样左右完全隔离的两栏，同时，如果右侧元素依旧是块级元素，那么他尽可能占满一行的特性还在，这样就保证了右侧元素依旧是自适应的解决外边距垂直方向重合问题
垂直方向上两个兄弟元素外边距会取最大值，而不是取和，那么我们可以通过触发BFC来防止他们之间相互影响。为其中一个元素的外边包裹一层父元素，并且触发父元素BFC，比如：overflow：hidden，这样打破原有格局，就不再会重叠啦！
另外我们可以用padding来代替marging，有点是简单易懂，缺点是如果根据设计本来就需要设置padding样式，那就没办法用了
总结一下，触发BFC可以解决：
- 浮动元素的父元素高度塌陷
- 两栏自适应布局
- 外边距垂直方向重合
