第一种方式,使用空标签来设置 clear:both，用于清除浮动。

但是添加一个并没有实质内容的标签并不符合简化页面结构的目的，而且在 JavaScript 操作子元素时很容易引起 bug。

Code 
     
    
      
       子元素
      
    
      
       子元素
      
    
      
       子元素
      
      
      
     
  
     
      又一行
     

第二种方式,利用:after 伪类

Code
     
    
      
       子元素
      
    
      
       子元素
      
    
      
       子元素
      
     
   
     
      又一行
     
 
     
 
     
    
      
       子元素
      
    
      
       子元素
      
    
      
       子元素
      
      
      
     
   
     
      又一行
     

几点说明:

1,:after 伪元素在元素之后添加内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。同理:before

2,IE6浏览器会执行zoom:1表示对象的缩放比例，但这里 overflow:hidden;和_zoom:1;是连起来用的，作用是清除clearfix内部浮动。 同理，还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。具体参考

3,整理自

参考阅读: