在CSS中clear属性的妙用
2012-01-12 10:52
337 查看
这里向大家描述一下在CSS中clear属性妙用，图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。
在CSS中clear属性妙用
在DIV+CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并 列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用Clear属性正好可以 解决这一问题，下面引用帮助的介绍：
CSS clear属性
图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。
注意：当这个属性随着"float"属性一起使用的话，那么结果可能会不尽如人意。
Inherited:No
继承性：无
举例
文本格式复制代码打印?
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<styletypestyletype="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>
<divclassdivclass="LeftText">区块1</div>
<divclassdivclass="LeftText">区块2</div>
<divclassdivclass="Clear"></div>
<divclassdivclass="FootText">区块3</div>
</body>
</html>
代码说明：
如果没有Clear这一层，"区块3"会紧接区块2并列在同一行。
加了Clear这一层后，会把上面的浮动DIV的影响清除，使其不至影响下面DIV的布局
本文转载自 http://www.itjianghu.net/120106/40914465057870477.htm
在CSS中clear属性妙用
在DIV+CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并 列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用Clear属性正好可以 解决这一问题，下面引用帮助的介绍：
CSS clear属性
图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。
注意：当这个属性随着"float"属性一起使用的话，那么结果可能会不尽如人意。
Inherited:No
继承性：无
举例
文本格式复制代码打印?
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<styletypestyletype="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>
<divclassdivclass="LeftText">区块1</div>
<divclassdivclass="LeftText">区块2</div>
<divclassdivclass="Clear"></div>
<divclassdivclass="FootText">区块3</div>
</body>
</html>
代码说明：
如果没有Clear这一层，"区块3"会紧接区块2并列在同一行。
加了Clear这一层后，会把上面的浮动DIV的影响清除，使其不至影响下面DIV的布局
本文转载自 http://www.itjianghu.net/120106/40914465057870477.htm
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 详解CSS中clear属性both、left、right值的含义
- CSS的clear属性
- CSS 的overflow:hidden; 、clear:both;属性详细解释
- css之clear属性
- 详解CSS中clear属性both、left、right值的含义
- CSS中float属性和clear属性的一些笔记
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- CSS中的float和clear属性
- 如何理解clear的css属性?
- 每日学习总结：CSS：Clear属性的用法、重复交易提示框、弹出提示框后页面变形、asp.net调用smtp服务发送邮件问题
- CSS中clear清除浮动属性
- CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)
- div+css布局中父层div高度不随子div高度变化的解决方法（clear属性使用方法）
- css:overflow属性妙用
- 每日学习总结：CSS：Clear属性的用法、重复交易提示框、弹出提示框后页面变形、asp.net调用smtp服务发送邮件问题
- css中的clear属性使用方法实例介绍
- 学习CSS之clear属性
- CSS中的clear属性
- 利用css的clear属性实现文字环绕图片效果