前端_BFC

怎样学习BFC

我们在学习一个新的东西执勤，可以从三步来进行学习，第一，是什么，有什么用，用在哪里，所以我们先来了解一下什么是BFC

BFC的定义

首先BFC是一套渲染规则，直译为块级格式化上下文，是指元素里面的内容不会影响元素外面的内容，所有的元素都会按照文档流的方式进行排列。

BFC的作用

1、可以清除浮动（解决浮动元素父级高度塌陷的问题）。
2、阻止margin的叠加。

哪些情况下可以产生BFC

1、position值为absolute，fixed；
2、float的值不为none；
3、overflow的值为auto、scroll或hidden（overflow不为visible）
4、display的值为table-cell、table-caption或inline-block；

BFC的特性：

1. 属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠
　　2. BFC的区域不会与浮动元素的区域重叠
　　3. BFC的高度包含浮动子元素的高度
　　4. BFC在页面上是一个独立的容器，里外的元素不会互相影响
　　5. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
　　
由此可见。我们可以通过BFC的特性来推断出BFC的用途