div布局的一些特性

adong

浏览: 35993 次
性别:
来自: 广州

最近访客更多访客>>

winbuilder

小鲁哥

zxcliving

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (23)

社区版块

存档分类

Firefox IE XHTML HTML

div的布局还真有些不容易掌握,其规律还摸不透,先死记硬背一些现象再说吧.
div是一个块级元素，默认情况下，默认情况下将占满父级容器的整行，同级的其他对象将在下一行显示。但是将某个div设置为float后，这个div本身会根据其中内容的需要而调整为内容需要的大小，其后的块级对象将浮动在它旁边显示，运行下面的html代码就可以看到效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#menu {
    background-color:red;
   float:left;
   /*clear:both;*/
}
#content{
background-color:green;

}
#submenu {
/*background-color:blue;*/

}
</style>
</head>
<body>
<div id="menu">
<div id="submenu">菜单区</div>
</div>
<div id="content">
内容区
</div>
</body>
</html>

为了让content区能够在下一样显示,在浮动的div中设置了clear:both属性,显示结果没有任何变化,再试着将clear:both属性加入到表示content的div中,content区就在下一行显示了.看来,对于已经设置了float特性的对象不能再设置clear特性了.

如果我不是设置menu区的float属性，而是设置menu区内部的div区的float属性，其结果与直接设置外部的menu区的效果完全一样，这就令我非常困惑了，按理说，如果我没设置外部的menu区的float属性，这个menu区自己应该占满一行，其内部的div区再按float属性漂浮在menu区内部，可现在却不是这样的！我接着明确设置了menu区的宽度，这时在ie下看到了我期望的效果，即menu区占据了规定的宽度，其内部的div区按float属性漂浮在了menu区内部，并且content区换行显示了，但是，在firefox下运行的效果却很怪，我就不想在继续追究下去了，这应该是firefox的bug了。实验代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#menu {
          width:200px;
    background-color:red;

}
#content{
background-color:green;
/*clear:both;*/
}
#submenu {
background-color:blue;
float:right;
}
</style>
</head>
<body>
<div id="menu">
<div id="submenu">菜单区</div>
</div>
<div id="content">
内容区

</div>
</body>
</html>

分享到：