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来放置这种情况。  

vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

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;}