1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible
利用BFC避免margin重叠。 一起来看一个例子：
<style> *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } </style> <body> <p>看看我的 margin是多少</p> <p>看看我的 margin是多少</p> </body>页面效果如下： 我们会发现，p标签垂直方向的margin重合了，因为属于同一个BFC的两个相邻的Box会发生margin重叠 解决方法：我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC
<style> *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } div{ overflow: hidden; } </style> <body> <p>看看我的 margin是多少</p> <div> <p>看看我的 margin是多少</p> </div> </body>页面效果如下：
解决兄弟盒子间因浮动产生的遮盖问题
<style> *{ margin: 0; padding: 0; } body { width: 100%; position: relative; } .left { width: 100px; height: 150px; float: left; background: rgb(139, 214, 78); font-size: 20px; } .right { height: 300px; background: rgb(170, 54, 236); font-size: 40px; } </style> <body> <div class="left">LEFT</div> <div class="right">RIGHT</div> </body>页面效果如下： 我们发现当左边的盒子设置浮动后，右边的盒子被遮盖了，为了解决这个问题，我们让right盒子成为一个单独的BFC
.right { overflow: hidden; //创建BFC height: 300px; background: rgb(170, 54, 236); font-size: 40px; }页面效果如下：
解决父元素因子元素浮动产生的高度塌陷问题（清除浮动）
