BFC上下文独立的渲染环境
简介：什么是BFC？
BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。
BFC的触发条件：
根元素,也就是html根标签；
position：fixed/absoluted;
float属性值不是none的；
overflow属性值不是visible的；
display属性值：inline-display/table-cell/table-caption/flex/inline-flex;
BFC作用：
bfc内部元素的布局不受外部元素影响。
bfc区域不会出现margin重叠
bfc区域计算高度时候会自动计算浮动元素。
bfc区域不会和浮动元素重合。
BFC的场景应用：
防止margin出现重叠：
这里可以很明显的看到div1的margin是生效了的，但是div2的margin在于1相邻的部分是没有起到作用的
在这里我们在div2外部套上一个div，并添加overflow：hidden属性，使其成为一个bfc区域，这样div2的margin也就生效了。
两栏布局，防止出现文字环绕效果：
在这里可以看到当div1设置为浮动后，会浮动在div2的上面，看起来像是div1被div2环绕包裹起来的感觉；
为div2添加一个包裹div并设置overflow属性，使其成为一个BFC区域，这样就可以避免出现文字环绕效果，并且可以实现自动实现两栏布局效果。
清除浮动，防止元素塌陷：
这个很好理解就是我们在页面布局的时候，如果不给父元素设置一个高度的话，子元素设置浮动后，子元素并不能将父元素的高度自动撑起来，这个时候给父元素设置一个overflow：hidden属性后，就可以起到清除浮动的作用。
创建 块格式化上下文 BFC 的方式：
根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
bootstrap
是一个用于快速开发Web应用程序和网站的前端框架。
是基于HTML、CSS、JAVAScrip的。