BFC(Block Formatting Context)翻译为『块级格式化上下文』。是一个独立的渲染区域,只有(Block-level box)块级盒子参与,BFC规定了内部盒子如何布局,以及盒子之间的关系和做用。布局
Box盒子是CSS 布局的基本单位,在CSS中咱们普遍的使用两种『盒子』——块级盒子和内联盒子。HTML元素的类型和display属性,决定了一个Box(盒子)的类型。不一样类型的Box(盒子),会参与不一样的Formatting Context(格式化上下文)。flex
Formatting Context(格式化上下文) 是页面中的一块渲染区域,它决定了子元素将如何布局,以及子元素之间的关系和做用。翻译
Block Formatting Context,块级格式化上下文,是Formatting Context(格式化上下文)的一种类型,只有(Block-level-box)块级盒子参与;相对应有Inline Formatting Context (IFC内联格式化上下文)。CSS3以后,还有GFC(Grid)和FFC(Flex)。orm
BFC块级格式化上下文,简单来讲是一个封闭的区域,这区域里面的盒子不会影响区域外面的布局。BFC区域内的盒子须要遵照一些布局规则,好比:盒子会按照垂直方向排,盒子垂直方向的距离由margin控制,BFC 区域不与浮动框重叠,计算BFC的高度时,浮动元素也参与计算等。根据BFC的布局规则,BFC能够解决清除浮动,外边距合并等异常布局,也能够实现自适应两栏布局,阻止元素被浮动元素覆盖。建立(触发)BFC的条件有给元素添加overflow属性且值不为visible,float属性且值不为none,display属性值为:flow-root,inline-block,table-cell,table,table-row,flex,grid等。get
CSS of BFC it
it邦——BFCtable