如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单：

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

class="box">
    
class="left">左边
    
class="right">右边

实现三栏布局中间自适应的布局方式有：

• 两边使用 float，中间使用 margin
• 两边使用 absolute，中间使用 margin
• 两边使用 float 和负 margin
• display: table 实现
• flex实现
• grid网格布局

两边使用 float，中间使用 margin
需要将中间的内容放在html结构最后，否则右侧会臣在中间内容的下方

实现代码如下：

class="wrap">
    
class="left">左侧
    
class="right">右侧
    
class="middle">中间

原理如下：

• 两边固定宽度，中间宽度自适应。
• 利用中间元素的margin值控制两边的间距
• 宽度小于左右部分宽度之和时，右侧部分会被挤下去

这种实现方式存在缺陷：

• 主体内容是最后加载的。

• 右边在主体内容之前，如果是响应式设计，不能简单的换行展示

两边使用 absolute，中间使用 margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

class="container">
  
class="left">左边固定宽度
  
class="right">右边固定宽度
  
class="main">中间自适应

两边使用 float 和负 margin

class="main-wrapper">
  
class="main">中间自适应

class="left">左边固定宽度
class="right">右边固定宽度