触发BFC，实现的三种自适应布局方式

<style>
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right{
height: 300px;
background-color: lime;
overflow: hidden;
}
</style>
    

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

<style>
.left{
height: 300px;
background-color: lime;
overflow: hidden;
}
.right{
width: 200px;
height: 200px;
background-color: red;
float: right;
}

</style>
    

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

<style>
.left{
width: 200px;
height: 200px;
background-color: lime;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: lime;
float: right;
}
.center{
height: 300px;
background-color: red;
overflow: hidden;
}

</style>
    

<div class="left"></div>    
<div class="right"></div>
<div class="center"></div>