BFC的概念:块级格式化上下文
BFC的原理:
- 垂直方向的外边距会发生重叠;
- BFC的区域不会与浮动元素的区域重叠(常用来清除浮动);
- BFC在页面上是一个独立的容器,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素;
- 计算BFC高度时,浮动元素也会参与计算
如何创建BFC:
- float值不为none;
- position的值不为static和relative;
- display的值为inline-block、table、table-cell、table-caption等table属性;
- overflow的值为auto、hidden。
BFC的使用场景:
- 解决元素垂直方向上外边距重叠的问题(给元素的父级创建BFC,解决本元素的外边距重叠问题);
- 两列或三列使用浮动实现自适应布局,自适应部分高度超过左右两侧高度后,自适应部分与左右部分重叠(依照上面BFC原理的第2条,创建BFC);
- 清除浮动