//html

<h3>使用自身浮动法定位</h3>

<div id="left_self"></div>

<div id="right_self"></div>

<div id="center_self"></div>

//style

#left_self,

#right_self {

    width: 200px;

    height: 100px;

    background-color: #ffe6b8

}

#left_self {

    float: left;

}

#right_self {

    float: right;

}

#center_self {

    margin: 0 210px;

    height: 100px;

    background-color: #a0b3d6

}

//html

<h3>使用margin负值法进行布局</h3>

<div id="wrap">

    <div id="center"></div>

</div>

<div id="left_margin"></div>

<div id="right_margin"></div>

//css

#wrap {

    width: 100%;

    height: 100px;

    background-color: #fff;

    float: left;

}

#wrap #center {

    margin: 0 210px;

    height: 100px;

    background-color: #ffe6b8;

}

#left_margin,

#right_margin {

    float: left;

    width: 200px;

    height: 100px;

    background-color: darkorange

}

#left_margin {

    margin-left: -100%;

    background-color: lightpink

}

#right_margin {

    margin-left: -200px;

}

//html

<div id="box">

    <div id="left_box"></div>

    <div id="center_box"></div>

    <div id="right_box"></div>

</div>

//css

#box {

    width: 100%;

    display: flex;

    height: 100px;

}

#left_box,

#right_box {

    width: 200px;

    height: 100px;

    background-color: lightpink

}

#left_box {

    margin-right: 10px;

}

#right_box {

    margin-left: 10px;

}

#center_box {

    flex: 1;

    height: 100px;

    background-color: lightgreen;

}