1、什么是盒子的BFC模式?
根据英文的翻译,Block Format Context块级格式化上下文。黑子开启这个模式之后,此时这个盒子就是一个独立的渲染区域,在这个区域内做操作,不会影响到外界的布局。
2、为什么要开启这个模式?
在学习或者工作中,我们会遇到这种情况,上面的盒子设置margin-buta,下面盒子设置margin-top为b,这两个盒子最终上下间距,不是a+b,而是取决于这两个值最大的一个,这时候,你会发现他们重叠到一起了。惊奇的以为这是bug,其实不是的,浏览器解析解析规则就是这样的。
还有一些时候,会因为有一些盒子没有给定指高宽,再加上设置了float浮动,就可能会出现盒子塌陷的问题,这是因为有些盒子他不是一个独立的渲染区域,很容易受到外界的影响,这时候,你就而已给定指定的宽高,或者开启BFC模式来清除浮动。
3、那么怎么开启BFC模式呢?
很常见的有,overflow属性:hidde,或者scoll,除了visible,都是可以开启BFC的
还有float属性,除了属性值为none(这不就是相当于没做吗,哈哈)
还有positon为absolute或者为fixed的时候
display:inline-block,table-cell,table-caption,flex,inline-flex,display基本上的属性都是可以开启这个模式的。