两栏布局是一种比较常见于后台管理的布局方式,通常是左边固定宽度,右边随着屏幕宽度自适应宽
利用BFC,左侧盒子设置浮动后,右侧的盒子就会上去,出现在左侧盒子底部,将右侧的盒子变成BFC区域就可以解决被左侧盖住的问题
代码展示
<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>