BFC是什么?应用的场景,有什么作用,如何形成BFC?

BFC是什么?
块级格式化上下文(Block Formatting Contexts);
有什么作用?
简单来说BFC就是一个独立不受外界干扰也不干扰外界的盒子.
是web页面中盒模型布局的css渲染模式,一个隔离的独立容器,
形成BFC的条件
浮动:float元素除了none以外的值。
定位: 绝对定位,相对定位。
display为以下的值之一:inline-block,table-cell,table-caption
overflow除了visible以外的值(hidden,auto,scroll)
BFC的特性:
1.内部的BOX会在垂直方向上一个接一个的放置;
2.垂直方向上的距离由margin决定。
3.BFC区域不会与float元素区域重叠。
4.计算BFC的高度时,浮动元素也参与计算。
5.BFC就是页面上的一个独立容器,里面的子元素不会影响外面的元素。外面的元素也不会影响里面的。

你可能感兴趣的:(BFC是什么?应用的场景,有什么作用,如何形成BFC?)