BFC规范、BFC触发元素、BFC能解决的一些常见问题

　　Formatting context（格式化上下文）是W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，

以及和其他元素的关系和相互作用。

　　BFC 即 Block Formatting context（块级格式化上下文），它属于上述

中的其中一种规范。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面

的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

　　　　

　　　　触发 BFC 规范的元素，可以形成一个独立的容器，不受外界影响

　　　　从而解决一些布局问题。

触发 BFC

　　浮动元素：float 除 none 以为的值

　　绝对定位元素：position（absolute、fixed）

　　disaplay 为 inline-block、table、flex

　　overflow 除了 visible 以外的值（hidden、auto、scroll）

BFC 特性及应用

　　解决 margin 叠加问题

　　　　问题

　　　　　　两个并列的容器，上面的设置下外边距，下面的设置

　　　　　　上外边距，会产生冲突

　　　　解决方法

　　　　　　给受影响的容器套上外层容器，然后加 class ，

　　　　　　给他加一个能够触发 BFC 容器的元素（注意层级问题）

　　解决 margin 传递问题

　　　　问题

　　　　　　外部容器嵌套一个内部容器，给内部容器加边距，外部容器

　　　　　　也会跟着一起加边距

　　　　解决方法

　　　　　　给受影响的容器加上能够触发 BFC 的元素

　　解决浮动问题

　　　　问题

　　　　　　外部容器嵌套一个内部容器，外部容器不给高，内部容器

　　　　　　浮动的话第外部容器就没有高度

　　　　解决方法

　　　　　　给外部元素加上能够触发 BFC 的元素

　　解决覆盖问题

　　　　问题

　　　　　　相邻的两个容器，第二个容器里面有文本内容，给第一个容器

　　　　　　加浮动，如果第一个容器比第二个容器小，第二个容器里面的

　　　　　　文本会跟在第一个容器的后面

　　　　解决方法

　　　　　　给第二个容器加上能够触发 BFC 的元素

　　　　　　　　BFC规范也可以做一列固定，一列自适应的布局效果