CSS BFC 详解

BFC是css布局中的一个重要概念。是块级布局的一个重要参考标准
BFC 的因为全称是 Block Formatting Context

BFC其实很简单，BFC只是一个布局概念，学习BFC可以从两个部分来理解

1. 什么情况下会形成BFC？
2. 形成BFC的盒子会发生什么？
3. BFC产生的这些特殊现象我们可以用来干嘛？

一：形成BFC的重要条件（符合其中之一即可）:

1.根元素或其他包含他的元素
2.浮动元素
3.绝对定位元素 absolute 或者fixed
4.内联块 inline-block
5.表格单元格 table-cell 或者 html的table td
6.表格标题 table-caption 或者 table的 th
7.具有overflow 且值不是visible的
8.display:flow-roots
9.column-span:all的
10.弹性元素
11.网格元素
12.多列容器

二：BFC布局规则

1.bfc内部盒子在垂直方向上依次放置，
2.盒子垂直方向上的间距由margin决定，同一个bfc下的盒子的margin会发生重叠
3.内部每个盒子的margin-left会触碰到容器的border-left，浮动盒子也是这样
4.Bfc区域不会和浮动元素重叠
5.计算bfc高度时，浮动元素会参与计算
6.Bfc里面的子元素不会影响到外面的元素

三：BFC 的主要实际应用

1.解决浮动塌陷问题，父亲管得住儿子
符合BFC的父元素的高度可以子元素撑开
利用上面布局规则5
如：设置父亲元素overflow:hidden; 或者 float:left
2.解决margin合并的问题，亲兄弟明算帐。
符合BFC的盒子不会和兄弟元素发生margin合并的情况
利用上面布局规则2
3.左右布局，避免盒子被浮动元素遮盖
设置盒子overflow：hidden
利用上面布局规则4
4.清除浮动，避免内部浮动元素干扰到外面的其他元素
利用上面布局规则6