css两栏布局，一个固定一个自适应
2021-05-25 本文已影响0人
oopsWeb
两栏布局是一种比较常见于后台管理的布局方式，通常是左边固定宽度，右边随着屏幕宽度自适应宽
利用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>
