摘要 今天小编跟大家讲解下有关CSS实现自适应两栏布局方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现自适应两栏布局

今天小编跟大家讲解下有关CSS实现自适应两栏布局方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现自适应两栏布局方法 的相关资料，希望小伙伴们看了有所帮助。

html代码：

<div> <div>固定宽度</div> <div>自适应区域</div></div>1.浮动+margin

第一种： 左侧栏固定宽度向左浮动 右侧主要内容则用margin-left留出左侧栏的宽度 默认宽度为auto 自动填满剩下的宽度。

.left{ float: left;}.right{ margin-left: 200px;}2.绝对定位

第二种：左边绝对定位（脱离文档流 不占位置） 右侧margin-left流出左侧栏宽度

.left{ position: absolute;}.right{margin-left: 200px;}

缺点:

使用了绝对定位 若是用在某个div中 需要更改父容器的position。没有清除浮动的方法 若左侧盒子高于右侧盒子 就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

3.float+calc()函数

第三种：左侧float、右侧float+calc()计算属性

.left{ float: left;}.right{float:right; width:calc(100%-200px);} 4.float+BFC

第四种：float+BFC BFC区域不会与float元素区域重叠

.left{ float: left;}.right{overflow:hidden;}5.flex

第五种：flex

.main{ display: flex;}.right{flex: 1;}

来源：爱蒂网