clear在CSS中的妙用

在DIV + CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用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 允许元素两边都有浮动的元素

举例

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

.FootText{
height: 180px;
}

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

代码说明：

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

转载于:https://www.cnblogs.com/scgw/archive/2007/08/24/868936.html

clear在CSS中的妙用相关推荐

在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
CSS中content属性的妙用
前言本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
css中clear的作用是什么？
clear : none | left | right | both. 对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素. 清除浮动方法, 1,给父 ...
css clear属性_CSS中的clear属性
css clear属性 CSS | 清除财产 (CSS | clear Property) We know so much about float property and how it is use ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
html clear的作用,css中clear的作用是什么？
当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用 ...
css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动 ...
CSS中clear“清除浮动”的作用原理
CSS中clear"清除浮动"的作用原理之前看视频中,总听到说clear不是清除浮动,而是消除浮动带来的影响,纠结了一天,没有理解,现在终于能明白这是什么意思了. 下面直接用代码 ...

clear在CSS中的妙用

可用值

clear在CSS中的妙用相关推荐

最新文章

热门文章