1、 写在 :after 伪元素 里面 (最推荐)
<style>
div{width: 500px;margin: 50px auto;}
ul{border: 1px solid #ccc;}
ul:after{display: table;content: " ";clear: both;} //关键
li{float: left;list-style: none;margin: 20px;}
</style>
2、 在子元素最后放置一个内容为空的元素
<div>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
<!--ul里面放入div这种在低版本IE下会有些问题,需要兼容IE9以下的不推荐使用-->
<div style="clear: both"></div>
<!--或-->
<!-- <br clear="all" /> -->
</ul>
</div>
3、 给父元素高度 (静态页面可以使用);
4、如果还要处理一些边距重叠的问题,可以把 :before 伪元素 也加上
ul:before{display: table;content: " ";}