清除浮动的方法

Posted dch0

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动的方法相关的知识,希望对你有一定的参考价值。

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>

 

 

以上是关于清除浮动的方法的主要内容,如果未能解决你的问题,请参考以下文章

css的浮动以及如何清除浮动

详解清除浮动的多种方法

清除浮动的几种方法

CSS清除浮动大全共8种方法

html5和css篇有关浮动以及如何清除浮动

清除浮动的方法以及优缺点