了解BFC
时间：2023-03-31 13:11:02
CSS
在CSS中的定义。BFC的全称是blockformattingcontext，意思是块级格式化上下文。是网页中盒模型布局的CSS渲染方式。可能上面的解释有点乱。一般来说，BFC是指一个区域的布局。该区域的布局有一个显着的特点：无论该区域的子元素采用何种布局或样式，都不会影响外部元素。BFC更常见的用法是清除浮动的影响。通常，当浮动的影响不明确时，父元素的高度会崩溃。那么BFC什么时候触发呢？满足以下任一条件：float的值不为none，position的值不为static或relateddisplay的值不可见FunctionClearfloating我们经常会遇到这样的情况：当一个容器包含包含浮动元素的子元素时，会导致容器没有高度。人们经常使用一个伪类，然后使用伪类中的clear属性来清除浮动。其实也可以通过定义一个BFC来达到同样的目的，例如：
.container{width:600px;背景色：黑色；}.containerdiv{浮动：左；宽度：200px；高度：200px；左边距：10px；高度会塌陷，我们可以通过在父容器中添加overflow:hidden来创建一个BFC来解决这个问题：.container{width:600px;背景色：黑色；溢出：隐藏；}.containerdiv{浮动：左；宽度：200px；高度：200px；左边距：10px；background-color:green;}防止文本换行
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
img{float:left;宽度：40px；height:40px;}如上例所示，一般情况下，我们期望的结果是左边显示图片，右边显示文字说明，而不是上面显示的文字环绕图片。这时候我们也可以通过创建一个BFC来解决这个问题：img{float:left;宽度：40px；高度：40px；margin-right:10px;}p{overflow:hidden;}防止边距折叠在正常的文档流中，子元素沿着父元素的顶部依次垂直排列，相邻的兄弟之间的垂直间距由它们之间间距最大的元素，而不是堆叠在一起，这是边距折叠，例如：
one两个 .container{width:200px;背景色：黑色；}p{宽度：150px；background-color:green;}.one{margin:10px0;}.two{margin:20px0;}这种情况，我们可以通过新建一个BFC
