方法一:添加新的元素 、应用 clear:both
.clear{
clear:both;
height: 0;
height: 0;
overflow:hidden;
}
方法二:父级div定义 overflow: auto
.over-flow{
overflow: auto;
zoom: 1; //处理兼容性问题
}
方法三: 伪类 :after 方法 outer是父div的样式
![CSS3中为什么要清除浮动以及三种清除浮动(float)的方法 CSS3中为什么要清除浮动以及三种清除浮动(float)的方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer :after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
![CSS3中为什么要清除浮动以及三种清除浮动(float)的方法 CSS3中为什么要清除浮动以及三种清除浮动(float)的方法](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwyTnZiVzF2Ymk1amJtSnNiMmR6TG1OdmJTOXBiV0ZuWlhNdlkyOXdlV052WkdVdVoybG0uanBn.jpg?w=700&webp=1)