BFC1

HTML

<div class='container'>
    <div class="middle">中间的</div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</div>

CSS

* {
  box-sizing: border-box;
}

.container{
    border: 1px solid black;
    height: 300px;
}

.middle, .left, .right{
    float: left;
}

.left{
    background: pink;
    width: 300px;
    height: 300px;
}
.right{
    background: blue;
    width: 300px;
    height: 300px;
}

.left{
    margin-left: -100%;    
}
    
.right {
    //margin-left: -300px;
    
}    

.left {
  position :relative;
  //left: -300px;

}

.right {
  position: relative;
  right: -300px;
}

.container{
    padding: 0 400px;
}

.middle {
  background-color: yellow;
  border: 1px solid red;
  height: 100%;
}