清除浮动的四种方式

清除浮动：主要是为了解决父级元素因为子级元素浮动引起内部高度为0的问题 

1、额外标签法：在浮动元素末尾添加一个空的标签<div style="clear:both"></div>

HTML

 <div class="app clearfix" >
        <div class="app1">手机</div>
        <div class="app2">电脑</div>
        <!-- 额外标签法 -->
        <div class="clear" style="clear:both"></div>
      </div>

2、给父元素添加overflow:hidden；属性

HTML

<div class="app clearfix" >
        <div class="app1">手机</div>
        <div class="app2">电脑</div>
      </div>

CSS

  <style>
        
	* {
		margin: 0px;
		padding: 0px;
	}

    
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
	/* --------以上两行样式代码为固定写法--------- */
	.app{
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
        /* 给父元素添加overflow: hidden属性 */ 
        overflow: hidden;
        
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}


    </style>

3、使用:after伪元素的方法

HTML

<div class="app clearfix" >
        <div class="app1">手机</div>
        <div class="app2">电脑</div>
       
      </div>

CSS

 <style>
        
	* {
		margin: 0px;
		padding: 0px;
	}
	/* --------以下两行样式代码为固定写法--------  */
	.clearfix:after{
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
    /* .clearfix:after,.clearfix:before{
        content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
    } */
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
	/* --------以上两行样式代码为固定写法--------- */
	.app{
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
        /* 给父元素添加overflow: hidden属性 */
        /* overflow: hidden; */
        
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}
</style>

4、使用:after和:before双伪元素的方法

HTML

<div class="app clearfix" >
        <div class="app1">手机</div>
        <div class="app2">电脑</div>
       
      </div>

CSS

<style>
        
	* {
		margin: 0px;
		padding: 0px;
	}
	/* --------以下两行样式代码为固定写法--------  */
	/* .clearfix:after{
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	} */
    .clearfix:after,.clearfix:before{
        content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
    }
	.clearfix{
		/* 为 IE6、IE7浏览器设置的清除浮动 */
		*zoom: 1;
	}
	/* --------以上两行样式代码为固定写法--------- */
	.app{
		width: 500px;
		margin: 0 auto;
		border: 1px solid #409EFF;
        /* 给父元素添加overflow: hidden属性 */
        /* overflow: hidden; */
        
	}
	.app1{
		float: left;  /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: skyblue;
	}
	.app2{
		float: left; /* 子元素向左浮动 */
		width: 200px;
		height: 100px;
		background-color: pink;
	}
</style>

注释：方法三和方法四没什么区别，常用的是二、三、四方法