两列布局的多种方式

• Html

    

        

            
Hello
            
I'am left
        
        

            
Hi
            
I'am right
        
    

• float+margin

左边固定为200px


.left{
    background:#fcc;
    width: 200px;
    float: left;
}
.right{
    background: #f66;
    margin-left: 210px;
}

• position:absolute

.content{
    position: relative;
    width: 100%;
    height: 500px;
    border: 1px solid #000;
}
.left{
    background:#fcc;
    width: 200px;
    position: absolute;
}
.right{
    background: #f66;
    position: absolute;
    left: 210px;
}

• Flex

.content{
    width: 100%;
    height: 500px;
    border: 1px solid #000;
    display:flex;
}
.left{
    background:#fcc;
    width: 200px;
    margin-right:10px;
}
.right{
    background: #f66;
    flex:1;
}

*float+BFC

.content{
    width: 100%;
    height: 500px;
    border: 1px solid #000;
}
.left{
    background:#fcc;
    width: 200px;
    margin-right: 10px;
    float: left;
}
.right{
    background: #f66;
    overflow: hidden;
}