「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」
BFC官方定义
BFC（BoxFormatting Context,块级格式化上下文） 是页面上的一个独立的隔离容器，容器里面的子元素不会受到外面的影响，反之亦然
为什么要用BFC
试想一下这个盒子，box1里面放了一个img
目前没啥问题，img有大小，盒子自适应包裹图片，一片祥和
但是，如果因为一些原因给img设置了浮动，会发生什么呢？
发生了什么？盒子蚌埠住了！！盒子没绷住，让图片漏出来了
这是因为设置浮动会让img脱离标准文档流，img就像一个气球一样浮起来了
想象一下盒子在第一层，而img浮动在第五层，自然包不住了
绷不住是浮动的副作用之一
既然🈶️副作用，那一开始为什么要设置浮动呢
这是因为我们设置浮动只是想让他从竖着排，变成横着排，
没想让他浮在第五层啊！！！
这个副作用不是我们想看到的，因此得处理一下
那么怎么才能既要又要
既要他横着排了，又让盒子能绷得住呢
设置BFC
让我们回顾一下BFC的定义，块级格式化上下文
是页面上的一个独立的隔离容器，容器里面的子元素不会受到外面的影响，反之亦然
既然能不受影响，就让img在盒子里面浮动，不跑到盒子外面，问题不就解决了吗！！！
所以，只要设置了BFC，我们就能既要就要了
那么请问在哪里能买到BFC呢？？？
设置BFC的三种方法
1⃣️float格式不是none（儿子浮动了，老子也浮）
float:left float:right 都可以随便你，不是none就行
注意是给盒子设置啊（给父元素设置）
就是因为儿子浮了（飘了），老子压不住他，那老子也浮动，不就完事了嘛！！
2⃣️position:absolute或position:fixed
3⃣️overflow：hidden ---------最推荐
这个最好记了，无脑一句完事
推荐推荐推荐
