bfc 字面意思就是块级格式化上下文(block formatting context),也是css 渲染模式的一种,使用bfc 表示的就是该元素渲染区域不受外界的影响,是一个独立的渲染区域。
它有那些特性呢
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠,margin:取边距最大值。
- 独立的容器 不会受到外界的干扰
触发条件
- position(absolute,fixed);
- display 为以下其中之一的值 inline-blocks,table-cells,table-captions;
- overflow 除了 visible 以外的值(hidden,auto,scroll)
- float 除none
解决问题
外边距合并问题,浮动元素元素父级未设置高度塌陷问题,浮动元素文字环绕问题(不想让文字环绕)