面试必备之--BFC

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
}