CSS清除浮动

为什么要清除浮动：清除浮动的本质主要是为了解决父级元素由于子级浮动引起内部高度为0 的情况

例如下面代码，没有使用清除浮动的效果

<div class="father clearfix">
     <div class="big"></div>
	 <div class="small"></div>
</div>
<div class="footer"></div>  


.father {
		border: 1px solid red;
		width: 300px;
		}
			
.big {
		width: 100px;
		height: 200px;
		background-color: purple;
		float: left;
	 }
			
.small {
		width: 80px;
		height: 80px;
		background-color: peru;
		float: left;
		}
.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
		}

清除浮动的方法：

1. 额外标签法:通过在浮动元素的最后一个元素的末尾添加一个空的标签 ,再清除浮动clear:both
2. 父级添加overflow属性方法：直接在父亲上添加overflow: hidden
3. 使用after伪元素清除浮动：给父级元素加clearfix类，然后直接在css中写这些如下代码：

   .clearfix:after {
   				/*正常浏览器 清除浮动*/
   				content: "";
   				display: block;
   				height: 0;
   				clear: both;
   				visibility: hidden;
   			}
   			
   			.clearfix {
   				*zoom: 1;
   				/*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
   			}

4. 使用before和after双伪元素清除浮动：给父级元素加clearfix类，然后直接在css中写如下代码：          

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

   使用上述的清除浮动的正常效果如下图：

想知道浮动更详细的内容，点击后面链接：https://www.cnblogs.com/smyhvae/p/7297736.html