BFC全称为block formatting context,块级上下文结构,具有BFC结构的元素的内部元素不会影响外部元素的布局和结构。
BFC可以由以下几种方式触发:
- <html>根元素
- float不为none
- overflow不为visible
- position除relative和static
- display的值为inline-block或table-cell
BFC具有很强的封闭性,因此利用BFC来实现的自适应布局更为健壮,主要的实现方式有以下两种:
1. overflow
overflow:hidden;
2. display
display: table-cell;
width: 9999px;
// 兼容IE7以下版本
*display: inline-block;
*width: auto;