您的位置：首页 > 其它

Div布局时注意使用clear属性

2011-06-24 22:06 176 查看

Div

布局时注意使用clear
属性

最近在编写静态页面的时候，发现有些时候会出现一些很奇怪的问题，页面布局“无缘无故”的乱掉了。后经过调试，发现是在一些设置了float
属性后的div
后面，没有再增加一个拥有clear
属性的div
。可能听起来有点拗口，下面看下实际代码。

一、

代码

为了测试div
的clear
属性的重要性，编写了一个测试示例程序，具体的html
代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">

<HTML>

<HEAD>

<TITLE> New
Document </TITLE>

<style
type="text/css">

.dv_class1{

height:80px;

border:1px
red solid;

width:400px;

}

.dv_class2{

height:30px;

float:left;

width:100px;

border:1px
blue solid;

}

.dv_class3{

height:30px;

float:right;

width:100px;

border:1px
blue solid;

}

.dv_class4{

height:30px;

border:1px
green solid;

}

.dv_clear{

clear:both;/*
清除float
属性*/

}

</style>

</HEAD>

<BODY>

<div
class="dv_class1">

<div
class="dv_class2">

我是内容1

</div>

<div
class="dv_class3">

我是内容2

</div>

<div
class="dv_clear"></div>

<div
class="dv_class4">

我是内容3

</div>

</div>

</BODY>

</HTML>

二、

效果比较

1.

正确的效果

把上面的代码拷贝到文件中，命名为.html
文件，在IE
中打开后的效果如下图，下图中的绿色框的效果为“我是内容3
”的正确显示位置。

2.

去掉代码中的红色部分后的效果

去掉代码中的红色部分，在IE
中打开后的效果如下图，发现绿色内容展现在“我是内容1
”的后面了，很奇怪吧。

所以当我们在对一些DIV
设置float
属性后，需要及时的使用clear
属性来清除前面div
的float
属性对后面div
的影响。

3.

原因

产生这样现象的原因可能是，具有float
属性的div
在排版的时候，会把后面紧接着的非浮动div
也会当做“浮动”的对象来处理，实际上紧接着的Div
我们并不想是浮动的，这时候可以通过这个div
的clear
属性来主动设置不允许该div
四周有浮动对象，即：终止“浮动”流。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航