BFC
BFC 全称 Block Formatting Context。
每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用
在正常流中的盒子要么属于块级格式化上下文,要么属于内联格式化上下文
BFC 的产生
- 根元素;
- float属性不为none;
- position为absolute或fixed;
- display为inline-block, flex, 或者inline-flex;
- overflow不为visible;
特性
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box--的margin会发生重叠每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
---
作用
作用
1.margin 合并
2.contain float
例子
例子一:让浮动内容和周围的内容等高
![](https://img.haomeiwen.com/i4117436/747401bdedb3bbe3.png)
![](https://img.haomeiwen.com/i4117436/a5a6586433075eb2.png)
例子二:外边距合并
![](https://img.haomeiwen.com/i4117436/7b31f02e900cb183.png)
### 使用display: flow-root
一个新的 display
属性的值,它可以创建无副作用的BFC。在父级块中使用 display: flow-root
可以创建新的BFC。
网友评论