一、BFC的概念1、规范解读BlockFormattingContext（BlockFormattingContext，BFC）是网页可视化CSS渲染的一部分，它是是布局过程中产生的块。水平框的区域也是浮动元素与其他元素交互的限定区域。2.通俗的理解BFC是一个独立的布局环境，可以理解为一个容器，在容器中按照一定的规则放置物品，不会影响其他环境中的物品。如果元素满足触发BFC的条件，则该元素在BFC中的布局不受外界影响。一个浮动元素会创建一个BFC，浮动元素内部的子元素主要受浮动元素影响，所以两个浮动元素互不影响。2、创建BFC根元素或包含根元素的元素浮动元素float=left|rightorinherit(≠none)绝对定位元素position=absoluteorfixeddisplay=inline-block|弹性|内联柔性|表格单元格或表格标题溢出=隐藏|autoorscroll(≠visible)3、BFC的特点BFC是一个独立的容器，容器内的子元素不会影响容器外的元素。反之亦然。盒子从顶部开始一个接一个垂直排列，盒子之间的垂直间距由边距决定。在同一个BFC中，两个相邻的块级框的垂直边距会重叠。BFC区域不会与浮动框重叠。BFC可以识别和包含浮动元素。在计算其所在区域的高度时，浮动元素也可以参与计算。四、BFC的作用1、包含浮动元素（清除浮动）浮动元素会脱离文档流（绝对定位元素也会脱离文档流），导致无法计算出准确的高度。这个问题称为高度崩溃。解决高度塌陷问题的前提是能够识别并包含浮动元素，即清除浮动元素。问题示例：如上图左图，容器没有height或者height=auto，其子元素（sibling）是浮动元素，所以容器的高度不会被拉伸，即height会坍塌。解决方案：在容器中创建BFC。HTML
