清除浮动的方法

Posted 2020-11-14 dch0

1.额外标签法

<style>
 　 .main{
        width: 500px;
        background-color: #A9A9A9;
    }
    .left{
        float: left;
        width: 200px;
        height: 200px;
        background-color: #FF69B4;
    }
    .right{
        float: right;
        width: 300px;
        height: 400px;
        background-color: #FFC0CB;
    }
    .clear{
        display: block;
        clear: both;
     }
</style>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
    <span class="clear"></span>
</div>

2.使用overflow

<style>
	.main {
		width: 500px;
		background-color: #A9A9A9;
		overflow: hidden;
	}

	.left {
		float: left;
		width: 200px;
		height: 200px;
		background-color: #FF69B4;
	}

	.right {
		float: right;
		width: 300px;
		height: 400px;
		background-color: #FFC0CB;
	}
</style>        
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>        

　　3.伪元素清除浮动

/* 伪元素属于行内元素，没有宽高，需要转化 */
/* 正常浏览器清除浮动 */
.clearfix:after{
     content: "";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
/* ie6清除浮动 * 仅ie7以下版本识别*/
.clearfix{
     *zoom: 1;
}        

4.双伪元素清除浮动

/* 双伪元素清除浮动 */
/* 正常浏览器清除浮动 */
.clearfix:before, .clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
/* ie7以下专用 */
.clearfix{
    *zoom: 1;
}

<div class="main clearfix">
　　<div class="left"></div>
　　<div class="right"></div>
</div>