两栏布局（左定宽，左不定宽）

第一种：左定宽，右自适应布局

1>浮动布局

<div id="left">Left sidebar</div><div id="content">Main Content</div>

* {   margin: 0;   padding: 0; } #left {   float: left;   width: 200px;   background-color: green; } #content {   background-color: orange;   margin-left: 200px;/*==等于左边栏宽度==*/ }

2>浮动和负边距

<div id="left">  Left Sidebar</div><div id="content">  <div id="contentInner">    Main Content  </div></div>

*{  margin: 0;  padding: 0;}#left {  background-color: green;  float: left;  width: 200px;  margin-right: -100%;}    #content {  float: left;  width: 100%;}    #contentInner {  margin-left: 200px;/*==等于左边栏宽度值==*/  background-color: orange;}

第二种：左不定宽，右自适应

1>float + BFC

<div class="left">    left</div><div class="right">    right</div>

.left{    float: left;    width: 100px;    margin-right: 20px;    //形成20px的间隔}.right{    overflow: hidden; <!-- 通过设置overflow:hidden来触发BFC特性，也可以使用*zoom: 1 -->}

2>flex布局

<div class="parent">  <div class="left">      <p>left</p>  </div>  <div class="right">      <p>right</p>  </div></div>

.parent{    display: flex;}.left{    margin-right: 20px;}.right{    flex: 1;}.left p{  width: 200px;}