.bigbox{
display: flex;
width: 100%;
height: 500px;
border:5px solid red;

    }
    .left{
        width: 200px;
        border:5px solid yellow;
    }
    .right{
        flex:1;
        border:5px solid green;
    }

你没有 clear：left 吧

你的 第二步骤 靠什么 解决的 ？

<div style="background-color:green;width:100px;height:100px">
    <div style="background-color:red;width:100px;height:20px">1</div>
    <div style="background-color:blue;width:100px;height:80px">
        <div style="background-color:yellow;width:30px;height:80px;float:left">2</div>
        <div style="background-color:pink;width:70px;height:80px;float:right;">3</div>
    </div>
    <div style="background-color:lightgreen;width:100px;height:20px">4</div>
</div>![图片说明](https://img-ask.csdn.net/upload/201609/05/1473062863_235002.png)

这种有动态的广告例子的布局可以不？行的话给个邮箱发给你

不好意思，工作较忙，已经发了