BFC,块格式化上下文,是一个独立的渲染区域,决定了块级元素如何对它的内部进行布局,以及与其他元素的关系
解释
块级元素:父级(块元素)
内容:子元素(块元素)
其它元素:与内容元素同级别
相互作用:BFC的内部元素与其他元素毫不相干
触发条件
触发BFC的方式:
- float 值不为 none;
- overflow 的值不为 visible;
- position 的值 不为 static 或者 relative 中的任何一个;
- display 的值为 table-cell, table-caption, inline-block;
BFC规则
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。你要避免相邻块元素外边距重叠的话,那你就要避免产生BFC。
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
区别
BFC | 普通文档流 |
---|---|
浮动的元素会被父级计算高度(父级触发BFC) | 浮动的元素不会被父级计算高度 |
非浮动元素不覆盖浮动元素的位置(非浮动元素触发 BFC) | 非浮动元素会覆盖浮动元素的位置 |
margin 不会传递给父级(父级触发了BFC) | margin 会传递给父级 |
两个相邻元素的上下 margin 不会重叠 | 两个相邻元素的上下 margin 会重叠 |
BFC应用
- 清除浮动
- 防止 margin 重叠
- 多栏布局的一种方式