1.父級手動給高度
缺點：不推薦使用垂蜗。只適合高度固定的布局，要給出精確的高度贴见，如果高度和父級div不一樣時，會產(chǎn)生問題
.con{border:1px solid red;height:300px;}
.left{width:100px;height:100px;float:left;background: green;}
.right{width:200px;height:150px;float:left;background: blue;}
<div class="con clearfloat">
<div class="left">left</div>
<div class="right">right</div>
</div>
2.在末尾添加一個空div或者br標簽
缺點：不推薦使用镣衡。如果頁面浮動布局多廊鸥，就要增加很多空div，讓人感覺很不好
.con{border:1px solid red;}
.left{width:100px;height:100px;float:left;background: green;}
.right{width:200px;height:150px;float:left;background: blue;}
.clearfloat{clear:both;}
<div class="con clearfloat">
<div class="left">left</div>
<div class="right">right</div>
<br class="clearfloat">
/*<div class="clearfloat"></div>*/
</div>
3.父級添加overflow:hidden或者overflow:auto
缺點：不推薦使用惰说。不能和position配合使用助被，因為超出的尺寸的會被隱藏。
.con{border:1px solid red;overflow:hidden;}
.left{width:100px;height:100px;float:left;background: green;}
.right{width:200px;height:150px;float:left;background: blue;}
<div class="con clearfloat">
<div class="left">left</div>
<div class="right">right</div>
</div>
4.父級添加偽元素::after和zoom
推薦使用：兩句代碼結(jié)合使用才能讓主流瀏覽器都支持
.con{border:1px solid red;}
.left{width:100px;height:100px;float:left;background: green;}
.right{width:200px;height:150px;float:left;background: blue;}
.clearfloat::after{
content:",
display:block;
clear:both;
visibility:hidden,
height:0;
}
.clearfloat{
zoom:1;
}
<div class="con clearfloat">
<div class="left">left</div>
<div class="right">right</div>
</div>
