CSS学习--DIV布局的空白间距

今天无聊就把以前的CSS Demo翻出来看看，也就动手写了几条代码，如下所示：

<style type="text/css">

div{ padding:0; margin:0; width:100%; position:relative;}

.col1{ background-color:#0C0;}
.col2{background-color:#CF0;}
.col3{background-color:#06C;}
</style>
</head>
<body>
<div class="col1"><h1>1</h1></div>
<div class="col2"><h1>2</h1></div>
<div class="col3"><h1>3</h1></div>
</body>
</html>

代码演示效果如下：

从以上可以发现，各DIV之间存在间隔，而且默认的情况下DIV在各主流浏览器上会留一定的空白间距。

body{ padding:0; margin:0;}
div{ padding:0; margin:0; width:100%; position:relative; 
float:left;
}

在源代码加上以上代码后，效果如下：　

各DIV之间的空白间距虽然消失了，但是可已发现没有设定高度的DIV的高度居然变高了。这是为什么呢？慢慢研究。