最近在学习网站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的布局
在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的布局