BFC规范：

1. 父容器是一个独立的容器。
   2. 子容器无论怎么折腾，都不影响外面的布局。

   触发BFC规范：

   浮动元素：float 除 none 以外的值
   绝对定位元素：position (absolute、fixed)
   display 为 inline-block、table-cells、flex
   overflow 除了 visible 以外的值 (hidden、auto、scroll)

   BFC应用及特性：

   解决margin叠加问题
   解决margin传递问题
   解决浮动问题
   解决覆盖问题

1. 经典布局：两列布局 ( 一列固定宽，一列自适应 )

box1{ width:200px; height:200px; background:red; float:left; }
#box2{ height:600px; background:blue; margin-left: 200px;}
让固定大小容器上下左右居中
position:absolute; left:50%; top:50%; margin:负的宽高的一半
让不固定大小容器上下左右居中
position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;