清除浮动的8种方式

1.为父级元素设置伪类:after和zoom

/*CSS部分*/

 
    
Left
 
    
Right
 

box2

原理：原理和方法2有点类似，但由于只有IE8以上和非IE浏览器才支持:after，所以针对低版本的IE，要使用zoom(IE专有属性，可以触发IE的haslayout属性，有清除浮动，清除margin重叠等作用)才可解决浮动问题
优点：浏览器支持好，不容易出现其它问题
缺点：需要与zoom结合才可以让主浏览器都支持
建议：推荐使用

2.在结尾处添加一个空的标签clear:both

/*CSS部分*/

 
    
Left
 
    
Right
 
    


box2

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现其它问题
缺点：增加多于div，强迫症者难以忍受啊！！！
建议：不推荐，此方法主要是以前使用的一种清除浮动方法

3.为父级元素定义height

/*CSS部分*/

 
    
Left
 
    
Right
 

box2

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

4.为父级元素定义overflow:hidden

/*CSS部分*/

 
    
Left
 
    
Right
 

box2

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

5.为父级元素定义overflow:auto

/*CSS部分*/

 
    
Left
 
    
Right
 

box2

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级元素时，会出现滚动条
建议：不推荐使用

6.父元素跟随浮动

/*CSS部分*/

 
    
Left
 
    
Right
 

box2

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

7.父级元素定义display:table

/*CSS部分*/

 
    
Left
 
    
Right
 

box2

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

8.结尾处加br标签clear:both

/*CSS部分*/

 
    
Left
 
    
Right
 
    


box2

原理：父级元素定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both,和方法2类似
优点：简单，代码少，浏览器支持好，不容易出现其它问题
缺点：增多一个br，强迫症难以忍受啊！！！
建议：不推荐使用，只作了解