html+css两栏布局的三种方法

一、

1. 左边div设置float：left 或者position: absolute 脱离文档流

2. 避免左边div遮住右边div，右边div设置margin-left：左边div的宽度

tip：calc可以动态计算宽高

二、

1. 左边div设置float：left 或者position: absolute 脱离文档流

2. 避免左边div遮住右边div，右边div设置overflow: hidden 触发 块级格式化上下文（BFC）

三、flex布局

1. 给两个div添加父div并设置display:  flex

2. 左div设置固定宽

3. 右div设置flex: 1，右div将会自动填充撑满父div的宽

        tip：给右div设置宽度将不生效

 思想：固定一栏，对另一栏进行操作。本文固定左div，同理也可固定右div( float: right )。