是什么BFCBFC的全称是BlockFormattingContext，即块格式化上下文。除了BFC还有：IFC（行级格式化上下文）-内联InlineGFC（网格布局格式化上下文）-显示：gridFFC（自适应格式化上下文）-显示：flex或者显示：inline-flex注意：同一个元素不能同时存在于两个BFC中。它是网页可视化CSS渲染的一部分，是块盒布局过程发生的区域，也是浮动元素与其他元素交互的区域。你怎么理解的？其实就是说BFC是一个渲染区，有自己的一套渲染规则，使得它内部布局的元素有一些特点。BFC提供独立的布局环境，BFC内部的元素布局与外部互不影响。块级元素CSS属性值显示是block、list-item、table的元素。块级框有以下特点：当CSS属性值显示为block、list-item、table时，为块级元素布局，块级框呈现为垂直排列的块。每个块级框每次都会参与创建BFC每个块级元素都会生成至少一个块级框，称为主块级框；有些元素可能会生成额外的块级框，比如
，用来存放子弹创建BFC下面的元素会创建一个BFC根元素（）浮动元素（float不是没有）绝对定位元素（positionisabsoluteorfixed)tabletitleandcell(displayistable-caption,table-cell)anonymoustablecellelement(displayistableorinline-table)inlineblockelement(displayisinline-block)溢出值不是的元素visibleelasticelement（display的直接子元素是flex或inline-flex元素）grid元素（display是grid或inline-grid元素的直接子元素）以上是CSS2.1规范定义的BFC触发方法。在最新的CSS3规范中，flex和grid元素将创建F(Flex)FC和G(Grid)FC。BFC的特点BFC在页面上是一个独立的容器，容器里面的子元素不会影响外面的元素。BFC内部的块级框会在垂直方向上一个接一个排列。同一个BFC下的相邻块级元素可能会出现margincollapse。创建一个新的BFC可以防止margin折叠每个元素的marginbox。与包含块边界框（borderbox）的左侧接触（从右到左的格式则相反），即使浮动浮动框存在的区域不与BFC重叠计算时BFC的高度，浮动元素会参与计算如果大家不太了解，下面会提到BFC的应用。BFC的应用适应了两列布局。左列浮动（定宽或变宽均可），右列启用BFC。/*html代码*/自适应 