清除浮动方法大全

1. 问题：

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

2. 解决方案：

方法1：给父元素添加声明overflow:hidden;

缺点：会隐藏溢出的元素
 

方法2:在浮动元素下方添加空块元素,并给该元素添加声明：

clear:both;height:0;overflow:hidden;
缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能

eg：

不给浮动的ul加清除，效果如下，下面内容上移

 加了空标签占位

页面恢复正常

方法3:万能清除浮动法

::after{content:"";clear:both;display:block;height:0;visibility:hidden;/overflow:hidden;}
缺点：伪元素选择器在IE7及以下浏览器不识别，所以此方法只能解决IE8 及以上浏览器高度塌陷问题

注意点：

1.一般：表示伪类，为了区分伪元素加上双冒号：：

2.选择符与双冒号间没有空格，否则万能浮动法将失效

3.一般直接在通用的reset.css里写好样式，html浮动元素直接调用 class="clearfix"

eg:加万能浮动方法