本文通过一个简单的HTML页面测试了浮动属性对不同元素的影响。发现对于<div>元素，当未设置浮动时，其margin-top和margin-bottom属性不会生效；而对于<dl>内的<dd>元素，则不受此限制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试浮动</title>
<style type="text/css">
.wrapper{width:520px; background-color:#FFCCFF; float:left;}
.top{width:520px; background-color:#CCFFFF;}
.top dl{510px;}
.top dl dd{width:200px;margin-left:10px; margin-top:10px;}
.nexttop{ width:520px;margin-top:20px; float:left;background-color:#66FFFF;}
</style>
</head>
<body>
<div class="wrapper">
<div class="top">
<dl>
<dd>若不浮动会是怎么样的效果</dd>
<dd>好像dl dd 不受浮动影响</dd>
</dl>
</div>
<div class="nexttop">下半部分，不浮动，没有所谓的margin</div>
<div>啥也没有 在没有浮动的情况下，使用外部的颜色</div>
</div>
</body>
</html>
做了个小测试，<div>在不浮动的情况下，margin-top,margin-bottom,不起作用
但是<dl>下的<dd>标签，不受浮动的影响，没有浮动的情况下，margin-top,margin-bottom,照样起作用
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
