首页 » 工作 » 正文

网页布局中使用CSS来清除浮动(代替清浮动的空元素)

发布者:站点默认
2013/04/18 浏览数(1,473) 分类:工作 网页布局中使用CSS来清除浮动(代替清浮动的空元素)已关闭评论

说明:

通常我们使用以下方法来清除浮动:

<style>
.content{float:right}
.clear {clear:both}
</style>
<div class="content">content</div>
<div>sidebar</div>
<div class="clear"></div>
<div>footer</div>

这个方法简单有效,但是会浪费一个元素。下文是一个用CSS来清除浮动的方法,不需要添加空元素:

<style>
.content{float:right}
.footer {zoom:1; /* 触发IE的layout来清除浮动(IE专属属性,通不过W3C) */}
.footer:after { /* 标准浏览器的清除浮动 */
	content:'...';
	visibility:hidden;
	height:0;
	display:block;
	clear:both;
}
</style>
<div class="content">content</div>
<div>sidebar</div>
<div class="footer">footer</div>

<完>

点击返回顶部
  1. 留言
  2. 联系方式