BFC和它背后的floatabsoluteinline-block本文是经验之谈，感谢张新旭的博客BFC(Blockformattingcontext)BFC(Blockformattingcontext)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部Block-levelBox如何布局，与该区域外部无关。BFC布局规则：内部Box将垂直放置，一个接一个地放置在每个元素的边距框的左侧，触及包含块的边框框的左侧（对于从左到右的格式，否则相反）。即使存在浮动也是如此。inlinefloat)(浮动流)BFC在页面上是一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之亦然。Box的垂直距离由margin决定。属于同一个BFC的两个相邻框的margin会重叠，解决BFC的margin重叠区域不会和float框重叠（absolute和float会重叠）。两列布局计算BFC高度时，浮动元素也参与计算，解决父元素高度崩溃float3。如何触发BFC根元素float属性不是noneposition是absolute或fixeddisplay是inline-block,table-cell,table-caption,flex,inline-flexoverflow是notvisiblefloat最初的目的：实现文字环绕效果。虽然会像absolute一样脱离文档流，但是在清除float的时候可以扩大父元素的高度。实现方法：销毁linebox，导致父元素高度塌陷。表现形式：宽度缩小到最小，与absolute和inline-block一致。目前应用：根据BFC的规则，浮动元素不会重叠，从而形成浮动流，当超过父元素的宽度时会折叠。网格布局：float+percentage清除浮动的影响：父元素的高度塌陷。一般来说，清除浮动其实就是清除浮动造成的伤害，即父元素的高度塌陷。根据BFC的定义，BFC会隔离内部元素，所以在BFC内部浮动不会影响外部。例如，floatabsolute和fixed从文档流中分离出来，使父元素高度折叠。从第一个非静态父元素到根元素不可避免地形成一个搜索链。Transform将截断向上搜索链。位置。应用：变宽高元素垂直水平居中实现top的原理，left的百分比是相对于定位父元素的，此时左上角居中，tranform:translate(-50%,-50%)是相对于自身，将自身拉回一半。示例absoluteinline-blockline-height是行内元素所占的高度。图片底部有一个空白区域。原因是图片默认对齐基线，离底线还有一定距离。解决方法line-height
