css 清除浮动元素影响的几个常用简单的方法

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: " ";}