面试题之浅谈BFC

bfc 字面意思就是块级格式化上下文（block formatting context）,也是css 渲染模式的一种，使用bfc 表示的就是该元素渲染区域不受外界的影响，是一个独立的渲染区域。

它有那些特性呢

1.  内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，margin:取边距最大值。
3. 独立的容器 不会受到外界的干扰

触发条件

1. position（absolute，fixed）；
2. display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
3. overflow 除了 visible 以外的值（hidden，auto，scroll）
4. float 除none

 解决问题

外边距合并问题，浮动元素元素父级未设置高度塌陷问题，浮动元素文字环绕问题（不想让文字环绕）