两栏布局

1. 左侧定宽，右侧自动

• float+margin

<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

html,body{
    margin:0;
    padding: 0;
    
}
.m-box .left,
.m-box .right { 
    height: 200px; 
    line-height:200px; 
    text-align:center; 
}
.m-box .left{
    float:left; 
    width:200px; 
    background-color:#ccc;
}
.m-box .right{
    margin-left:210px;
    background-color:#666;
}

• position+margin

<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

html,body{
    margin:0; 
    padding: 0;
}
.m-box .left,
.m-box .right {
    height: 200px; 
    line-height:200px; 
    text-align:center; 
}

.m-box .left{
    position: absolute;
    width:200px;
    background-color:#ccc; 
}
.m-box .right{
    margin-left:210px;
    background-color:#666;
}

• float+负margin

<div class="m-box">
    <div class="cont">右</div>
</div>
<div class="m-asider">左</div>

html,body{
    margin:0; 
    padding: 0;
}
.m-box .cont,
.m-asider { 
    height: 200px;
    line-height:200px;
    text-align:center;
}

.m-box { 
    float:left; 
    width: 100%;
}
.m-box .cont {
    margin-left:210px;
    background-color: #ccc;
}
.m-asider {
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: #ccc;
}

• flex

<div id="container">
    <div id="aside"></div>
    <div id="main"></div>
</div>

  #container {
            display: flex;
            background-color: aqua;
            height: 100%;
        }
        
        #aside {
            flex: 0 0 200px;
            /* flex-grow flex-shrink flex-basis */
            background-color: rgb(52, 61, 30);
            height: 600px;
        }
        
        #main {
            flex: 1 1;
            /* flex-grow 和 flex-shrink */
            background-color: rgb(224, 115, 188);
        }

• float+BFC方法

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
    基本的样式是，两个div相距20px, 左侧div宽 120px
  </div>
</div>

 .wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
        
        .left {
            width: 120px;
            border: 5px solid #ddd;
        }
        
        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }
        
        .wrapper-float-bfc {
            overflow: auto;
        }
        
        .wrapper-float-bfc .left {
            float: left;
            margin-right: 20px;
        }
        
        .wrapper-float-bfc .right {
            margin-left: 0;
            overflow: auto;
        }

• 双inline-block方案

 <div class="wrapper wrapper-inline-block" id="wrapper">
        <div class="left">
            <p>左边固定宽度，高度不固定</p>
            </br>
            </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>

  .wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
        
        .left {
            width: 120px;
            border: 5px solid #ddd;
        }
        
        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }
        
        .wrapper-inline-block {
            box-sizing: content-box;
            font-size: 0; // 消除空格的影响
        }
        
        .wrapper-inline-block .left,
        .wrapper-inline-block .right {
            display: inline-block;
            vertical-align: top; // 顶端对齐
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .wrapper-inline-block .right {
            width: calc(100% - 140px);
        }