BFC就是“块级格式化上下文”的意思,简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。BFC是一块用来独立的布局环境,保护其中内部元素不受外部影响,也不影响外部。
1.BFC触发的几种方式:
- 浮动元素,float 除 none 以外的值;
- 绝对定位元素,position(absolute,fixed);
- display 为以下其中之一的值 inline-block,table-cell,table-caption;
- overflow 除了 visible 以外的值(hidden,auto)
2.BFC的应用
- 可以用来自适应布局
利用BFC的这个原理可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。
给左边盒子加浮动,右边盒子加overflow:hidden;变成BFC,就可以消除外部左边盒子因浮动对他的影响
- 可以清除浮动
一个父元素中的子元素,设置浮动时,父元素没有设置高度,这时子元素脱离文档流,父元素感知不到子元素的高度,造成父元素的塌陷。
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。
- 解决垂直边距重叠
有两种边距重叠的情况:
1.父子关系的边距重叠
父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距。
解决办法是给父元素添加一个 overflow:hidden,这样父元素就变为BFC,不会随子元素产生外边距
2.同级兄弟关系的重叠
同级元素在垂直方向上外边距会出现重叠现象,最后外边距的大小取两者绝对值大的那个
可通过添加一个空元素或伪类元素,设置overflow:hidden;解决