BFC布局规则2：BFC不会与float box重叠
当overflow不为visible时会生成BFC
布局结构：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两列布局</title> <style> *{ margin:0; padding: 0; } body{ min-width: 600px; } .left{ width:200px; height: 200px; background: black; float:left; opacity: 0.3;/*测试使用*/ } .right{ height: 200px; background: greenyellow; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>
当左侧增加了透明后，会发现左侧遮住了右侧同等大小
解决方案，在右侧添加overflow：hidden，开启BFC
.right{
height: 200px;
background: greenyellow;
overflow: hidden;/*开启了BFC,overflow不为visible时,生成BFC.*/
}