浮动元素脱离文档流的表现

<style>
    .box{
        width: 50px;
        height: 50px;
    }
    .box-up{
        background: blue;
    }
    .float-box{
        float: left;
        width: 500px;
        height: 200px;
        border: 1px solid red;
        background: rgba(255, 0, 0, 0.2);
    }
    .box-down{
        background: green;
    }
</style>

<div class="box-up box">up</div>
<div class="float-box"></div>
<span>this is a text</span>
<div class="box-down box">down</div>