断舍离,永远去做你余生最重要的那件事

首页前端开发正文

对BFC的理解

朱绪2020-11-231029CSS

BFC是Block format context的缩写,意思是”块级格式化上下文“。

它是一块独立渲染区域,内部元素的渲染不会影响到边界之外的元素。

也就是说,任何BFC的元素,它里面无论怎么渲染都不会影响到外面的元素。这样对整体的布局、定位都是有好处的。

想想看,如果内部渲染能轻易影响到外面的元素的话,我们是很难把握这个布局的。

所以,BFC是布局里的一个很重要的概念。学CSS的,不能不知道这个。

BFC

怎么去创建BFC?有以下几种情况:

1、display的值是inline-block,inline-flex,flex,table-cell,table-caption。 

2、overflow的值不为visible 

3、float的值不为none 

4、position的值是absolute或fixed

BFC有一个很常见的应用就是浮动元素令父元素高度坍塌的问题。

原理是,父元素触发BFC后,容器里的子元素不会影响到外面的元素。

除了这个,还有外边距塌陷问题和自适应两栏布局也用到了BFC。