BFC是什么?
BFC是元素的隐藏属性,元素会变成一个独立的布局区域,不会在布局上影响到外面的元素
BFC可以理解为一个封闭的大箱子,箱子内部的元素不会影响到外部
BFC有什么用?
1、父元素的垂直外边距不会和子元素重叠(解决父子外边距的问题)
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动的子元素(解决高度塌陷)
BFC如何开启?
开启方式:
1、设置元素的浮动(不推荐)
-使用这种方式开启,虽然可以撑开父元素,但会导致父元素的宽度丢失
而且使用这种方式也导致下边的元素上移,不能解决问题
2、设置元素为行内块(不推荐)
-可以解决高度丢失的问题,但是会导致宽度丢失,而且会导致三像素的问题
3、将overflow设置为一个非visible的值
-副作用较小,推荐使用
4、设置元素的绝对定位
绝对定位与浮动类似