完整clearfix，解决父子高度塌陷，外边距重叠问题

标题：完整clearfix，解决父子高度塌陷，外边距重叠问题

一、父子元素外边距重叠，当子元素需向下移时，会发生父子一起移动的问题。

解决方案：

	   /*添加伪元素*/
	   .box2:before{
	        content:"";
	        display:table;
	    } 

二、父元素未设置高度，被子元素撑开。当子类脱离文档流， 没有了位置，导致下面的元素都跑上来了，出现界面混乱问题。

解决方案:

      .box1:after{
             content:"";
             display:block;
             clear:both;
       } 

三、总方案，使用与两者情形

         .clearfix:after,
         .clearfix:before{
             content:"";
             display:table;
             clear:both;
         }

完整代码如下：

	
		"utf-8">
			
								
	
		
		
显示父元素包围子元素
	     
"box2 clearfix">  
	         
	         
	         
	         
	         
"box21">
	         
	     
	     
		
		
		
		
		
		

	     
显示的图形，父元素被子元素撑开了，若没有写边界，则显示的图像会看起来很怪
	     
"box1 clearfix">  
	         
"box11">
	         
	     
	     
"box3">
		"magazine-unlock-hi1057703.jpg" width="300"  alt="周杰伦"/>