BFC全称block formatting context ，中文名块级格式化上下文，bfc的表现原则是如果一个元素具有BFC,那么内部子元素翻江倒海，都不会影响外部元素。—— 张鑫旭《css世界》
触发BFC
官方文档: Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
翻译下
-
<html>根元素
-
float的值不为none
-
overflow的值为auto、scroll或hidden
-
display的值为table-cell、table-caption和inline-block中的任何一个
-
position的值不为relative和static
那么BFC有什么特性呢?
- 在一个BFC当中，内部的Box会在垂直方向，从顶部开始一个接一个地放置；
- Box垂直方向的距离由margin决定，属于同一个BFC上下文的两个相邻Box的margin会发生叠加；
- 在BFC上下文中，每个盒子的左外侧紧贴包含块的左侧（从右到左的格式里，则为盒子右外侧紧贴包含块右侧），甚至有浮动也是如此（尽管盒子里的行盒子Line Box可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。
BFC的作用
-
如果两个相邻box 处于同一个bfc，那么这两个box会出现外边距合并的情况
http://js.jirengu.com/desiw/1/edit?html,css,output
这时，可以利用bfc来解决外边距合并，我们可以创造一个新的BFC,利用了display：inline-block -
可以利用BFC来实现两栏布局
http://js.jirengu.com/rosuc/1/edit?html,css,output
通过设置main 的overflow: hidden -
解决了父元素塌陷的问题。当子元素都浮动后，父元素会出现包不住子元素的情况。这是我们通过设置overflow: hidden，生成一个BFC，让子元素在父元素内。
(http://js.jirengu.com/cufem/1/edit)
网友评论