最近在学习网站div+css方面的动西,发现很多页面都有很多带有float属性的div块之后会包含一个只含clear属性的div块,但并没有什么内容,一直不得其解,在网站上搜索了一下,认为以下很合情合理,一起同大家分享:
在DIV + CSS设计网页中,经常需要设置多个DIV并列排列,往往是使用float:left或float:right来实现,问题是,当前面并列的多个DIV总宽度不足100%,下面的的DIV就很可能向上提,和上一行的并列的DIV在同一行,这不是我们想要的结果。
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"属性一起使用的话,那么结果可能会不尽如人意
举例
<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的布局
分享到:
相关推荐
布局及常用属性 布局概述 为什么要应用布局? 布局概述 阅读报纸时会发现,虽然报纸中的内容很多,但 是经过合理地排版,版面依然清晰、易读。 1.确定版心 ...这个空标签可以为<div>、、等任何标签。
在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果...
利用css的clear属性实现广告文字环绕效果_网页代码站(www.webdm.cn) <div style="float:left;"> <div style="float:left;height:100px;width:1px;"><!--一个宽为1px的空白层,利用该层的高度控制广告层上下的位置。...
Unity 3D 摄像机 Clear Flags属性和Culling Mask属性用途详解
清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例
本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...
vb clear实例,可以通过这个例子了解clear的用法
CSS clear属性相信大家都有所耳闻吧,下面举例说明下clear属性到底给float(clear常常和float结合使用)带来哪些影响
clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 60px; cursor: pointer; padding-top: 6px; padding-right: 0px; padding-...
Clear type Tuning 中文控制面板
复制代码代码如下: <div xss=removed> <div xss=removed>TEST DIV</div> <div xss=removed></div> </div> 你可以将此部分代码放到一个HTML页面看看效果,然后在去掉”<div xss=removed></div>”看一下效果,就知道这...
CLEAR
主要介绍了css的border和clear属性使用方法和示例,需要的朋友可以参考下
使用clear属性清除浮动是司空见惯的事情,使用clear:left早已烂熟于胸;但是使用clear:right属性的时候未必奏效了,本文将针对这个问题详细探讨下,感兴趣的朋友可以了解下,希望对你有所帮助
前端clear清除
CClear 电脑清理 注册表清理 软件卸载 磁盘擦除