CSS | 自适应两栏布局方法

标签：main   cal   display   pre   over   idt   属性   pos   定位   

html代码：

<div class="main">
    <div class="left" style="background: #00FF7F; width: 200px; min-height: 200px;">固定宽度</div>
    <div class="right" style="background: #87CEEB;min-height: 300px;">自适应区域</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;}

CSS | 自适应两栏布局方法

标签：main   cal   display   pre   over   idt   属性   pos   定位   

原文地址：https://www.cnblogs.com/pp-yang/p/12076455.html