HTML-清除float的8种方式

了解其原理，了解为啥需要清除浮动。

1. 为啥需要清除浮动

在我们使用父子元素中，我们没有给最外层的盒子设置高度，但是我们知道里面的元素没有设置浮动的话，那么这个盒子的高是会自动被撑开，但是当内层的元素浮动之后，就会出现问题：

• 背景不能显示
• 边框不能撑开
• margin设置值不能正确显示

2. 清除float浮动

方法一： 添加新的元素，应用clear: both;

设置之后，padding和margin的不会受到影响。

方法二： 给父级div定义overflow：auto/hidden;

同时添加zoom：1 属性来处理兼容性的问题，
原理：仅仅只在父级元素上添加了一个值为auto的overflow属性，父元素的高度立即被撑起，将浮动元素包裹在内。看起来，浮动被清除了，浮动不再会影响到后续元素的渲染（严格讲，这和清除浮动没有一点关系，因为不存在哪个元素的浮动被清除，不纠结这个问题）。其实，这里的overflow值，还可以是除了"visible"之外的任何有效值，它们都能达到撑起父元素高度，清除浮动的目的。

方法三：设置样式选择器：after伪元素

原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

css:
.clearfix:after{
 content: '';
 display: block;
 height: 0;
 visibility:hidden;
 clear: both;
}

该样式在clearfix，即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。你可能已经意识到，这也只不过是前一种清除浮动方法（添加空白div）的另一种变形，其底层逻辑也是完全一样的。前面的三种方法，其本质上是一样的。

总结

方法1：父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
清除浮动的方法：

方法2：结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 
优点：简单、代码少、浏览器支持好、不容易出现怪问题 
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 

方法3：父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 
建议：推荐使用，建议定义公共类，以减少CSS代码。 
/*清除浮动代码*/ 
.clearfix:after{content:"";display:block;clear:both;visibility:hidden;height:0} 
.clearfix{zoom:1} 

方法4：父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 
优点：简单、代码少、浏览器支持好 
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

方法5：父级div定义 overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 
优点：简单、代码少、浏览器支持好 
缺点：内部宽高超过父级div时，会出现滚动条。 
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 

方法6：父级div 也一起浮动

原理：所有代码一起浮动，就变成了一个整体 
优点：没有优点 
缺点：会产生新的浮动问题。 
建议：不推荐使用，只作了解。 

方法7：父级div定义 display:table

原理：将div属性变成表格 
优点：没有优点 
缺点：会产生新的未知问题。 
建议：不推荐使用，只作了解。

方法8：结尾处加 br标签 clear:both

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both 
建议：不推荐使用，只作了解。