两栏布局的5中实现方式

一栏固定宽度，一栏自适应

方法1

左侧float:left，右侧margin-left。

.left{float: left;width: 200px;}
.right{margin-left: 200px;}

浮动的元素是在页面中脱离文档流，没有了自己的位置，所以后面的元素被浮动的元素覆盖，通过margin撑开。

方法2

左侧float:left，右侧overflow:hidden。

.left{float: left;width: 200px;}
.right{overflow:hidden;}

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，并且BFC具有普通元素没有特性：如下边距不发生折叠；可以清除浮动；可以阻止元素被覆盖。

正因为有了这些特性，所以右边可以用触发BFC的元素来清除左边浮动的影响。

如何形成BFC

1.float为left，right2.position为fixed和absolute3.display为flex，inline-flex，table，table-cell，table-caption，inline-block4.overflow为auto，scroll，hidden

所以除了设置overflow:hidden我们还可以设置下面的任意一种

1.overflow: auto2.overflow: scroll3.display: flex

方法3

利用定位

.wrap{position: relative; }
.left{ width: 200px; }
.right{ position: absolute; top: 0; left: 200px; right: 0}

方法4

利用弹性布局flex

.wrap{display: flex;}
.left{width: 200px;}
.right{flex: 1;}

推荐使用

方法5

grid网格布局

.wrap{display: grid;grid-template-columns: 200px auto;}

浏览器兼容性不好，不推荐使用！！！