BFC(Block formatting context)直译为"块级格式化上下文"。
BFC它是指一个独立的块级渲染区域，只有 Block-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
如何生成BFC
- 根元素
- 设置了一下属性的元素
display:inline-block;
float:left | right;
overflow:hidden | auto | scroll;
position:absolute | fixed;
BFC属性特性
- 内部的标签会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
- 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
- BFC的区域不会与float的标签区域重叠
- 计算BFC的高度时，浮动子标签也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然
BFC应用
- margin塌陷和合并问题
- 自适应布局问题
- 防止文字环绕
- 清除浮动
网友评论