清除浮动（闭合浮动）的几种方法

**

**

1.父级div定义高度

**

原理： 给父元素设置固定的高度，避免了父元素无法获取height的问题（就是父元素height不会为0）；

优点： 简单，代码少，容易掌握；

缺点： 只能适用于固定的高度布局（限制性比较大）；

**

2.在浮动的元素的结尾处添加空标签

**

原理： 在浮动的元素后面添加空的div标签并且设置样式clear：both；

优点： 简单，代码少，浏览器支持好；

缺点： 如果说页面中浮动元素较多的话，添加许多空div标签，影响代码质量，让人感觉很不好，而且此时的父元素的高度也没有被撑开（即height:0;）；

**

3.给父元素设置overflow

**

原理： 给父元素设置样式overflow: hidden/auto/scroll 都可以，此时浏览器会自己去检查浮动区域的高度（可以理解为浮动元素的高度，设置后父元素的高度就会被撑开），同时还必须定义width，不能定义height（定义了高度用此方法没意义了，那就相当于使用方法1），考虑兼容还须定义zoom：1（zoom是IE专有属性，可以设置或检索对象的缩放比例）；

优点： 简单，代码少，浏览器支持好；

缺点： 如果说页面中浮动元素较多的话，添加许多空div标签，影响代码质量，让人感觉很不好，内容增多时候容易造成不会自动换行导致内容被隐藏掉，而且此时的父元素的高度也没有被撑开（即height:0;）；

**

4.给父元素定义:after伪元素

**

原理： 父元素定义:after,如下div::after{content:’.’;display:block;clear:both;height:0;visibility:hidden;}
div{zoom:1;} /IE专有属性，可解决ie6,ie7浮动问题/

优点： 符合闭合浮动思想 结构语义化正确，浏览器支持号，建议定义公共类，减少css代码，许多大型网站都使用，如百度，淘宝，新浪，网易，腾讯等，推荐使用；

缺点： 对于初学者可能比较的难理解，代码会比较其他方法偏多，需要结合使用；

**

（最后两种方法不推荐使用，知道就好）

**

5.父元素跟着一起浮动

**原理：**父元素跟着一起浮动使其变成一个整体

优点： 无；

缺点： 容易产生新的问题；

**

6.父元素设置display:table;

原理： 使其父元素变成表格

优点： 无；

缺点： 容易产生新的问题；