大家好，我是前端西瓜哥。今天就来学习BFC吧。BFC是BlockFormattingContext的缩写，中文翻译为BlockFormattingContext。BFC是网页CSS渲染的一种机制，是块级框布局中生成的区域。你可以把一个BFC理解为一个容器，里面的元素不会影响容器外面的布局。哪些元素属于BFC？根元素，即HTML元素。一个浮动元素，即使使用了float属性并且值不是none。绝对定位的元素。块级容器（例如display的值为inline-blocks、table-cells、table-captions）。溢出值不可见的元素。使用display:flow-root的元素。这是一个新的价值，旨在创造无副作用的BFC。兼容性存疑，比较少用。当然还有一些CSS属性也可以触发BFC，但是比较少见，这里就不一一列举了。读者可以自行阅读MDN文档。目前，最常见的方式是构建带有overflow:hidden的BFC。一般来说，它的副作用很小。但如果元素下有超出框范围的内容，则会被截断，请谨慎使用。BFC的特点BFC有两个主要的特点，让我们来了解一下。特征一：上下边距重叠在同一个BFC下的两个相邻的块级元素，上下方向的边距重叠。比如上一个div设置margin-bottom:20px，下一个div设置margin-top:10px，然后你会发现他们之间的距离其实是20px（两者的最大值），而不是30px（和）两者之一）。<样式>.box{宽度：100px；高度：100px；}.b1{背景颜色：浓汤；底部边距：20px；}.b2{背景颜色：蓝紫色；顶部边距：10px；}
