高频面试题:BFC

1 什么是BFC

BFC是一块独立的布局环境,保护其内的元素不受外部影响,也不影响外部. 本身BFC是一种css的布局方式,只是我们可以利用他来解决外边距折叠的问题,BFC并不是并不是专门解决这个问题的:

2 如何触发BFC

float的值不是none,position的值不是 static 或 relative ,displiay的值是inline-block 或 table-cell 或 flex 或 table-caption 或  overflow的值不是visible;

3 BFC的用途

1, 解决父子的外边距折叠问题(因为BFC 模型 只作用于本身的内部元素,就是父子关系),给父元素加入上述的css属性即可,(注意:无法解决父元素兄弟之简的外边距折叠问题)

2, 实现了块级元素独占一行的特性,并且规定了浮动元素不被静态稳当流元素的影响.(这是为什么块级元素独占一行的原因)

3, 清除浮动的影响,BFC在计算高度时,会一同计算浮动元素的高度,所以也可以清除浮动带来的影响