bfc

# 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解决