BFC
BFC的概念
BFC即block formatting contexts(块级格式化上下文),通俗一点来讲,可以把BFC理解为一个封闭的大箱子,箱子内的元素无论如何翻江倒海,都不会影响外部。
BFC的触发条件
1,根元素html默认就是一个BFC
2 ,float的值不为none 单纯的div不是BFC,如果添加了浮动就是BFC
3,overflow的值不为visible 单纯的div不是BFC,如果添加了overflow:hidden就是BFC
4,display的值为line-block/table-cell/table-caption/flex/inline-flex
5,position的值为absolute或fixed
BFC的特性及应用
1,Box垂直方向的距离有margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠(应用:防止marin重叠)
2,BFC的区域不会与float box发生重叠(应用:自适应两栏布局)
3,计算BFC的高度时,浮动元素也参与计算(应用:清楚内部浮动)
4,BFC内部的Box会在垂直方向,一个接一个的放置
5,每个元素的margin box的左边会与包含块的border box的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此
6,BFC就是页面上的一个独立容器,容器里面的元素不会影响外面的元素