html + css 琐碎

BFC 的概念

　　BFC 是一个容器，是一个独立的布局环境，决定了元素如何对其内容就行定位，以及与其他元素的关系和相互作用；BFC 中的子元素的布局不会受到外界的影响；

　　BFC 的布局规则：

　　　　1)、在 BFC 下，内部的 box 会在垂直方向，一个接一个的放置；

　　　　2)、Box 垂直方向的距离由 margin 决定；属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加；

　　　　3)、在 BFC 中，每一个盒子的左边缘 margin-left 会触碰到容器的左边缘 border-left ，即使存在浮动也会如此；

　　　　4)、BFC 的区域不会与 float box 重叠；

　　　　5)、计算 BFC  的高度，浮动元素也会参与计算；

　　触发 BFC 的条件：

　　　　1)、根元素即html；

　　　　2)、float 的值不为 none；

　　　　3)、overflow的值不为 visible；

　　　　4)、display的值为 inline-block、table-cell、table-caption；

　　　　5)、position 的值为 absolute 或 fixed；