1.定义
BFC全称block formatting context(块级格式化上下文)
2.BFC作用
- 实现更健壮、更智能的自适应布局
- 解决margin重叠
- 清除子元素浮动带来的影响
3.如何触发BFC
- 根元素
- float的值不为none
- overflow的值为auto、scroll、hidden
- display的值为table-cell、 table-caption、inline-block
- position的值不为static、 relative
4.实际使用
// 方案1
.left{
overflow: hidden;
}
// 方案2
.left2{
display: table-cell;
width: 9999px;
// 兼容IE7
display: inline-block;
width:auto
}