BFC

Posted 2021-02-02 liufuyuan

一、BFC

　　1.BFC(Block formatting context)直译为“块级格式化上下文”。

　　　　1）它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干；

　　　　2）是Web页面中盒模型布局的CSS渲染模式；它的体系属于常规文档流。

　　2.BFC的布局规则

　　　　1）内部的Box会在垂直方向，一个接一个地放置；

　　　　2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；

　　　　3）每个元素的margin box的左边， 与包含块border box的左边相接触；

　　　　4）BFC的区域不会与float box重叠；

　　　　5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；

　　　　6）计算BFC的高度时，浮动元素也参与计算。

　　3.哪些元素或属性能触发BFC

　　　　1）根元素(html)

　　　　2）float属性不为none position为absolute或fixed

　　　　3）display为inline-block, table-cell, table-caption, flex, inline-flex

　　　　4）overflow不为visible

　　4.BFC的作用　

　　　　1）自适应两栏布局

　　　　2）清除内部浮动

　　　　3）防止margin上下重叠

　　5.创建BFC

　　　　如果想要创建一个新的BFC，只需要给它添加上面提到的任何一个CSS样式就可以了。

　　　　例如，请看下面的HTML：

　　　　 　　<div class="container"> Some Content here </div>

　　　　　　一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式，如overflow: scroll, overflow: hidden, display: flex, float: left,或者 display: table来创建；

　　　　　　display:table可能会产生一些问题

　　　　　　overflow:scroll可能会显示不必要的滚动条

　　　　　　float:left将会把元素置于容器的左边，其他元素环绕着它

　　　　　　overflow:hidden将会剪切掉溢出的元素

　　　　　　所以每当想要创建一个新的BFC的时候，我们会基于我们的需求选择最好的样式条件。