兩欄布局是一種比較常見(jiàn)于后臺(tái)管理的布局方式,通常是左邊固定寬度艰躺,右邊隨著屏幕寬度自適應(yīng)寬
利用BFC呻袭,左側(cè)盒子設(shè)置浮動(dòng)后,右側(cè)的盒子就會(huì)上去腺兴,出現(xiàn)在左側(cè)盒子底部左电,將右側(cè)的盒子變成BFC區(qū)域就可以解決被左側(cè)蓋住的問(wèn)題
代碼展示
<style>
* {
margin: 0;
padding: 0;
}
.left-box {
float: left;
width: 300px;
height: 900px;
background: skyblue;
}
.right-box {
overflow: hidden;
height: 900px;
background: pink;
}
</style>
</head>
<body>
<div class="left-box"></div>
<div class="right-box"></div>
</body>