DIV的高度自动拉伸（height属性）…

相应的CSS样式如下：

1. .container {
2.      width: 150px;
3.      background-color: #00FFFF;
4.      margin: 5px;
5.      padding: 5px;
6. }
7. .float {
8.      width: 50px;
9.      float: right;
10.      background-color: #FFFF00;
11.      margin: 5px;
12.      padding: 5px;
13. }

这段代码在不同的浏览器中会有不同的表现，在大多数新版本的浏览器中，它会出现下面的效果：

也就是说，虽然浮动层位于第一个容器内，但第一个容器的高度显然不受浮动层的影响，浮动层会超出容器的高度范围。也许你会对这种效果感到十分困惑，但事实就是如此。对于这个问题，采用 clear:both 是很难解决的。这时就要使用一个技巧：给容器加上 overflow: hidden（也可以试试用auto）。即把容器CSS的样式修改如下：

1. .container {
2.      width: 150px;
3.      background-color: #00FFFF;
4.      margin: 5px;
5.      padding: 5px;
6.      overflow: hidden;
7. }

这时的效果将变成如下：

这个 overflow: hidden 似乎很难说得通，因为按常规理解，这个特性应该是把浮动层的超出部分隐去。但事实是，当不指定容器的高度时，overflow: hidden 会自动撑开容器的高度，以便使浮动层不发生溢出现象。