BFC的概念
什么是BFC?
BFC:块级格式化上下文是前端页面的可视化css渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
在BFC中,盒子从顶端开始垂直的一个接一个的排列,两个盒子之间的垂直的间隔是由他们的margin值决定的,在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠
简单的说,就是把BFC当做是一个盒子,盒子内部的元素无论怎么操作都不会影响到外部
BTF的具体应用
1.在同一个BTF下会发生外边距合并
外边距合并会有三种情况
第一种,当两个元素垂直排列时,第一个元素的外边距会与第二个元素的上边距发生合并
2.当一个元素包含另一个元素中时(假如没有内边距或边框把外边距分隔开),他们的上下外边距也会发生合并
3.假如有一个空元素,这个空元素有外边距,但是没有边或者内容以及填充,在这种情况下,上外边距和下外边距就会碰到一起,但是没有发生合并
解决方式:
可以将这些元素放在不同的BFC容器中
h5代码
css代码
效果图