bfc

Posted 2020-10-14

# BFC

标签（空格分隔）： bfc web前端

---

## 什么是BFC
**BFC(block formatting context):块级格式化上下文,是w3c css2.1规范中的概念**

它是一种属性，会影响元素的定位以及子元素的布局，它决定了元素如何对内容进行定位，以及与其他元素的关系。

BFC提供了一个环境，在这个环境中布局不会影响其他环境中的布局。

**形成BFC的条件**

1.浮动元素，float除none以外的值
2.绝对定位的元素，position(absolute,fixed)
3.dispaly为以下其中之一的值（inline-block，table-cell,table-caption）
4.overflow除了visible以外的值

**常见的BFC现象**

1. 包含浮动元素
通常情况下，如果内容里面包含子元素，父元素会被子元素撑开，但是如果这个子元素是浮动的，那么父元素的高度会出现塌陷的现象，这时候需要用bfc来清除浮动
加一个空元素，清除浮动，clear:both
不能给父元素加overflow:hidden，因为如果子元素有溢出的内容，会被隐藏。

2.不被浮动元素覆盖
div浮动兄弟遮盖问题，由于左侧发生了浮动，右侧没有浮动的内容会被左侧覆盖，可以给左侧加overflow:hidden，触发bfc来解决遮挡问题

3.margin重叠
块级标签的竖直方向的margin会以大的为准，可以用overflow:hidden解决