BFC
概念: 单独的块级渲染作用域
应用: BFC是可以显式的调出来,满足以下几种情况就可以出现BFC
- position为fixed或absolute,因为这两种布局会脱离文档流
- float为上下左右浮动的
- flex布局
display:flex
display:inline-block
- overflow不为visible =>还不是很清楚这个属性
注意!!!!
一个BFC内的元素会引起上下margin值重叠,使用overflow:hidden可以避免margin值,因为当overflow为hidden时,这两个元素就不再是一个BFC了,自然就避免了margin值重叠
而浮动元素是float不为none的属性,给其设置一个overflow:hidden即可让其成为BFC,BFC在计算高度的时候,是包含浮动元素的,故可以清楚浮动。