CSS clear的属性及使用方法

CSS clear属性

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.
图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floating element)。使用clear属性可以让元素边上不出现其它浮动元素。

Note: This property does not always work as expected if it is used along with the /"float/" property.
注意:当这个属性随着/"float/"属性一起使用的话,那么结果可能会不尽如人意

Inherited: No
继承性:

可用值

描述
left No floating elements allowed on the left side
不允许元素左边有浮动的元素
right No floating elements allowed on the right side
不允许元素的右边有浮动的元素
both No floating elements allowed on either the left or the right side
元素的两边都不允许有浮动的元素
none Allows floating elements on both sides
允许元素两边都有浮动的元素

 

举例

<style type=/"text/css/">

.LeftText{
   margin: 3px;
   float: left;
   height: 180px;
   width: 170px;
   border: 1px solid #B1D1CE;
   background-color: #F3F3F3;
}

.FootText{
   height: 180px;
}

.Clear
{
   clear:both;
}
</style>

<div class=/"LeftText/">区块1</div>
<div class=/"LeftText/">区块2</div>
<div class=/"Clear/"></div>
<div class=/"FootText/">区块3</div>


代码说明:

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

阅读更多
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭