BFCBlockfomattingcontext（简称BFC）Inlineformattingcontext（简称IFC）CSS2.1只有BFC和IFC，CSS3还增加了GFC和FFCBFC定义：BFC直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部Block-levelBox如何布局，与该区域外部无关。这些元素会触发BFC：（如果子元素有float，可以直接给父元素添加内容）1、根元素——HTML元素2、float属性不是none3。位置是绝对的或固定的4。显示是内联块。table-cell,table-caption,flex,inline-flex,5,overflow不可见6,flow-root意思：触发BFC兼容性不是很好css新增BFC功能：1，让BFC内部元素包裹起来2,让相邻的两个元素有明确的界限应用场景BFC使用场景面试。...其余时间避免使用，不使用BFC清除浮动（BFC用clear:both或display:flow-root清除副作用）//BFC可以包裹浮动元素.father{}.child{height:100px;背景：rgba(0,255,0,1);边距顶部：100px；}//这个parent的高度是从child算起的！！！//parent的高度会从顶部开始计算，除非触发BFC（添加overflow:hidden）//使用flow+div进行左右layout.father{width:100px;最小高度：600px；边框：3px纯红色；向左飘浮;右边距：20px；}.child{最小高度：600px；边框：5px纯绿色；溢出：自动；//display:flow-root//如果没有BFC，浮动元素会不清楚让这两个分开}BFC和文档流文档流影响这个元素的排列顺序BFC影响这个元素的宽高
