div高度自适应（或者大小自适应）

固有的唯一格式表现（摘自W3C school）。在编写页面的时候（这里是指jsp），有遇到div标签不能随着内部的内容扩充本身大小的情况，借助div标签的height和overflow属性，可以完美解决问题。

一 布局的时候设定了div的宽度和高度，但高度不够

实际效果如下（firefox上）：

图一

将最外围的div的height设置为auto，就能解决问题：

图二

overflow属性则是用来控制超出容器边框范围的内容的显示方式，允许的取值有：

值描述

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

默认取值是visible，这就是为什么图一中table超出div的部分还是显示出来，但是div本身大小没有改变。如果不想改变div的高度，可以设置overflow为auto，效果如下：

图三

二 子元素为浮动元素

如果被包围的因素为浮动元素（即设置了float为none的样式），这些元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

事实上，如果被包围的元素为图像，也设置了浮动样式，那么结果和div、表格一样。这种情况下，可以使用clear样式实现全包含的效果，甚至是包含到哪一个元素。clear 属性定义了元素的哪边上不允许出现浮动元素。可以取值如下：

值描述

left

在左侧不允许浮动元素。

right

在右侧不允许浮动元素。

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。

如果我们想要包围元素视觉上包围所有浮动元素，应该在所有浮动元素后面添加一个空的div块，其唯一样式为clear：both。

此外，通过设定clear为不同的值，可以控制包围到那个元素的效果，下面设定clear为left，表示左边不能有float元素，效果如下：

设定空的div的clear为left后，包围效果就是包围到左边的浮动块。同样，设为right，效果和both是一样的。