BFC_兩列布局
阿新 • • 發佈：2020-07-26
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.*/
}