页面两栏布局

一边整理一边记忆

学习：https://blog.csdn.net/baidu_36065997/article/details/80279305

4种情况：

一栏定宽   一栏自适应

一栏不定宽  一栏自适应

两栏等高

左右宽度比 1:2，右边 分上下结构，高度比 1:1

左侧定宽，右侧自适应

方法一：

设置 两个高度相同；

左边 float：left，设置宽度a

右边不设置宽度，但 margin-left：a

（块级元素 流式特性）

方法二：

设置 两个高度相同；

左边 float：left

右边 overflow：hidden（用 overflow：hidden触发的 bfc 清除 左边 产生的浮动影响）

（作者 下面的话我觉得更好理解：原话——不与浮动元素交集，自动退到 浮动元素宽度之外）

作为普通元素的流体特性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。

如果 右边宽度 固定，左边 宽度 自适应，那 html  结构 该是 右边div 先写

方法三：

给两个 div 加上wrapper

wrapper 相对定位，左边 设置定宽a，右边 绝对定位，top、right都是0，left 是a