BFC(block-levelformattingcontext)是页面中一个独立的渲染区域。并且有一套渲染规则，决定了它的子元素将如何定位，以及它们与其他元素的关系和交互。具有BFC特性的元素可以看成是一个隔离的独立容器，使BFC内部的元素与外部元素相互隔离，使得内部元素和外部元素的定位不会相互影响。IE浏览器是hasLayout，一般可以通过zoom:(除normal以外的任意值）触发。hasLayout是IE浏览器渲染引擎的内部组件。在InternetExplorer中，元素要么计算其自身内容的大小和组织，要么依赖父元素来计算内容的大小和组织。为了调整这两个不同的概念，渲染引擎使用了hasLayout这个属性，可以是true也可以是false。当一个元素的hasLayout属性为真时，我们说这个元素有布局（Layout）。当您拥有布局时，它会负责调整自身和可能的后代的大小和定位，而不是依赖祖先来完成这项工作。如何实现BFC(BlockFromattingContext)根元素()浮动元素(element'sfloat)绝对定位元素(element'spositionisabsoluteorfixed)inlineblockelement(元素的显示是inline-block)**tableunitcell(元素显示为table-cell，HTML表格单元格默认为该值）表格标题（元素显示为table-caption，HTML表格标题默认为该值）overflow属性的值display值为flow-root的元素的不可见的弹性元素（display是flex或inline-flex元素的直接子元素）grid元素（display是grid或inline-grid元素的直接子元素）布局规则普通文档流式布局规则：浮动元素不会显示【其他计算父元素高度的框会忽略此元素，但其他框中的文字仍会为此元素腾出空间并环绕它。]非浮动元素会覆盖浮动元素的位置，margin会传给parent。两个相邻元素的上边距和下边距将重叠。浮动元素的位置会被覆盖（非浮动元素触发BFC）margin不会传递给parent（父元素触发BFC）两个相邻元素的上下边距不会重叠（加一个父元素之一，并让其父元素触发BFC)双飞翼Layout.content{float:left;width:100%;}.main,.left,.right{height:200px;行高：200px；文本对齐：居中；字体大小：20px；颜色：#fff;}.main{margin-left:160px;右边距：110px；背景：绿色；}.left{浮动：左；左边距：-100%；宽度：150px；背景：红色；}.right{浮动：左；左边距：-100px；宽度：100px；背景：蓝色；
