清楚浮动的几种方法

最新推荐文章于 2021-11-21 10:35:06 发布

sfanxi

最新推荐文章于 2021-11-21 10:35:06 发布

阅读量235

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_36366212/article/details/83064307

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、在浮动元素后面加一个空div标签，添加clear : both;

.div1{background:yellow;} 
.div2{background:#800080;width:400px;height:100px;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:100px;background:#DDD} 
.clearfloat{clear:both}/*清除浮动代码*/ 

<div class="div1"> 
	<div class="left">Left</div> 
	<div class="right">Right</div> 
	<div class="clearfloat"></div> 
	<div class="div2"> div2 </div>
</div>

2、给父元素增加伪类：after

其中display将元素设置为块状，content属性设置要添加的伪类内容，clear清除浮动，overflow保证添加的伪类内容不会超出，visibility将填入的内容进行隐藏，ie8以上和非IE浏览器才支持

zoom(IE专有属性)可解决ie6,ie7浮动问题。

.div1{background:yellow;} 
.div2{background:#800080;width:400px;height:100px;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:100px;background:#DDD} /*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";height:0} 
.clearfloat{zoom:1} 

<div class="div1 clearfloat"> 
	<div class="left">Left</div> 
	<div class="right">Right</div> 	
</div>
	<div class="div2"> div2 </div>