摘抄自【[https://www.cnblogs.com/xiaohuochai/p/5248536.html](https://www.cnblogs.com/xiaohuochai/p/5248536.html)】 ### **满足下列条件之一就可触发BFC** 【1】根元素，即HTML元素 【2】float的值不为none 【3】overflow的值不为visible 【4】display的值为inline-block、table-cell、table-caption 【5】position的值为absolute或fixed ### **BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。它与普通的块框类似，但不同之处在于:** * **可以阻止元素被浮动元素覆盖** * **可以包含浮动元素** * **属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠** *