# 两列布局

# 左侧固定，右侧自适应

# 方案一：左 float，右 margin

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

.left{
    float: left;
    width: 100px;
  background: yellow;
}
.right{
	margin-left: 120px;
  background: red;
}

# 方案二：左 float，右 BFC

形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象）。

.left{
    float:left;
    width:100px;
    margin-right:20px;
}
.right{
    overflow:hidden;/*触发BFC*/
    /*_zoom:1;*/ /*IE6使用zoom:1来触发BFC*/
}

# 方案三：table

.parent{
    display: table; 
    width: 100%;
    table-layout: fixed; /*加速table渲染，实现布局优先*/
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

# 方案四：flex

只兼容 IE10+

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

# 方案五：grid

← float 定位 →