clear属性在CSS中的妙用

hl756799782

浏览: 77911 次
性别:
来自: 深圳

最近访客更多访客>>

fv3386

xiumoo

jaycs1723658

zhouzonglisrj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术探讨

CSS CLEAR

原文链接：http://developer.51cto.com/art/201009/224908.htm

你对clear属性在CSS中的使用是否了解，这里向大家描述一下，在DIV+CSS设计网页中设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，使用Clear属性正好可以解决这一问题，下面引用帮助的介绍。

clear在CSS中的妙用

在DIV+CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用Clear属性正好可以解决这一问题，下面引用帮助的介绍：

CSS clear属性

图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。

注意：当这个属性随着"float"属性一起使用的话，那么结果可能会不尽如人意

Inherited:No

继承性：无

可用值

示例代码：

<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type"
content="text/html;charset=gb2312"/> 
<title>无标题文档</title> 
<style type="text/css"> 
.LeftText{  
margin:3px;  
float:left;  
height:180px;  
width:170px;  
border:1pxsolid#B1D1CE;  
background-color:#F3F3F3;  
}  
 
.FootText{  
height:180px;  
}  
 
.Clear  
{  
clear:both;  
}  
</style> 
</head> 
 
<body> 
<div class="LeftText">区块1</div> 
<div class="LeftText">区块2</div> 
<div class="Clear">123</div> 
<div class="FootText">区块3</div> 
</body> 
</html>

代码说明：

如果没有Clear这一层，“区块3”会紧接区块2并列在同一行。加了Clear这一层后，会把上面的浮动DIV的影响清除，使其不至影响下面DIV的布局

分享到：

clearfix:after 清除css浮动 | Html5 学习系列（三）增强型表单标签

2013-04-18 17:11
浏览 1056
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论