在做html布局和css编写的时候，有没有遇到过这样的问题：子元素设置为浮出文档流后，父元素无法完全包裹起来实现子元素浮动在两列布局中，另一个子元素与浮动子元素的垂直边距重叠......通常我们可以使用块级格式化上下文（BFC）来解决它。什么是BFC？块格式化上下文（BlockFormattingContext，BFC）是网页可视化CSS渲染的一部分，是块框布局过程发生的区域，也是浮动元素与其他元素交互的区域。FC（formattingcontext）直译为格式化上下文，它是页面中的一个渲染区域，有一套渲染规则，决定了它的子元素如何布局，以及与其他元素的关系和作用。BFC在页面上是一个隔离的、独立的容器。容器内的子元素不会影响外面的元素，容器元素不会影响兄弟元素的布局。什么情况下会创建BFC根元素或者包含根元素的元素浮动元素（元素的float不是none）绝对定位元素（元素的position是absolute或者fixed）内联块元素（元素的显示是inline-block)表格单元格（该元素的显示为table-cell，HTML表格单元格默认为该值）表格标题（该元素的显示为table-caption，HTML表格标题默认为该值）匿名表格单元格element（元素的显示为table、table-row、table-row-group、table-header-group、table-footer-group（分别为HTMLtable、row、tbody、thead、tfoot的默认属性）或inline-table)overflow值为不可见的块元素display值为flow-root的元素（新方法，文末会提到）contain值为layout、content或strictelastic元素（直接子元素显示为flex或inline-flex元素）网格元素（显示为网格或内联网格元素的直接子元素）多列容器（列数或列宽不是自动的元素，包括列数为1）的元素column-span都是alwayscreateanewBFC,even元素没有包裹在多列容器中。常见应用场景让父元素包含浮动元素下面的例子说明如何让浮动内容等于父元素的高度，清除浮动带来的负面影响html
