一些关于BFC的心得

BFC的概念
什么是BFC？
BFC：块级格式化上下文是前端页面的可视化css渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

在BFC中，盒子从顶端开始垂直的一个接一个的排列，两个盒子之间的垂直的间隔是由他们的margin值决定的，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠

简单的说，就是把BFC当做是一个盒子，盒子内部的元素无论怎么操作都不会影响到外部
BTF的具体应用
1.在同一个BTF下会发生外边距合并
外边距合并会有三种情况

第一种，当两个元素垂直排列时，第一个元素的外边距会与第二个元素的上边距发生合并

2.当一个元素包含另一个元素中时(假如没有内边距或边框把外边距分隔开)，他们的上下外边距也会发生合并

3.假如有一个空元素，这个空元素有外边距，但是没有边或者内容以及填充，在这种情况下，上外边距和下外边距就会碰到一起，但是没有发生合并

解决方式：
可以将这些元素放在不同的BFC容器中
h5代码

css代码

效果图