这是我收藏的：

1. 使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css属性 “clear:both; ” ，弊端就是增加了无意义标签。

2. 使用overflow。给包含浮动元素的父标签添加css属性 “overflow:auto; zoom:1; ” ， “zoom:1” 用于兼容IE6。

3. 使用after伪对象清除浮动。该方法只适用于非IE浏览器。

http://www.pcss5.com/jiqiao...

解决问题要认识根本，浮动的本质是脱离当前常规流，所以只要创建外围BFC即可清除里面元素的浮动。

触发BFC的方式：
1、根元素；
2、float属性不为none；
3、position为absolute或fixed；
4、display为inline-block, flex, 或者inline-flex；
5、overflow不为visible；

这几个方法(针对父元素)都可以，至于在下面添加元素的方法，其实原理都是一样的，都是“撑开”当前常规流。

用伪类吧，
.p:before,.p:after{

content:'';
display:table;

}
.p:after{

clear:both;

}
.p{

zoom:1

}

简单粗暴的就overflow:hidden;