考慮一個(gè)兩列布局，右側(cè)盒子的寬度固定，左側(cè)占剩余空間且自適應(yīng)。html結(jié)構(gòu)如下：

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

QQ圖片20180714105925.png

1. flex布局實(shí)現(xiàn)

方法：flex布局中，作用在元素屬性上的flex-grow，默認(rèn)值為0，值為1是元素占滿剩余空間。實(shí)現(xiàn)如下：

div{
    height:300px;
}
.parent{
    display:flex;
}
.parent .left{
    background:blue;
    flex-grow:1;
}
.parent .right{
    background:red;
    width:300px;
}

2. absolute實(shí)現(xiàn)

方法：右側(cè)絕對(duì)定位，左側(cè)設(shè)置margin-right

div{
    height:300px;
}
.parent{
    overflow:hidden;
    position:relative;
}
.parent .left{
    background:blue;
    margin-right:300px;
}
.parent .right{
    position:absolute;
    right:0;
    top:0;
    background:red;
    width:300px;
}

3. float實(shí)現(xiàn)

方法:右側(cè)盒子float，左側(cè)盒子設(shè)置margin-right
調(diào)整html結(jié)構(gòu)如下：

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

css樣式如下：

div{
    height:300px;
}
.parent{
    overflow:hidden;
}
.parent .left{
    background:blue;
    margin-right:300px;
}
.parent .right{
    float:right;
    background:red;
    width:300px;
}

4.總結(jié)
上述三種方法中float需要將浮動(dòng)元素在html結(jié)構(gòu)中往前調(diào)，absolute方法中改變absolute盒子的高度對(duì)整個(gè)parent高度沒(méi)有影響，因此，目前三年種方法最好用的是flex布局