内容溢出

在使用div标签时，需要设置高度与宽度，如果不设置div的高度与宽度，也不设置div的边框，div中也没有内容，那么在页面上将什么也看不见，所以这也是为什么需要手工设置这些属性的原因，以便于在页面上更直观地观察div的变化。

现在先来完成这样一个实验，不为div设置高度与宽度，只设置边框，同时在div中放置一张图片，通过案例4-8,来体验,效果如图4-10所示。

例4-8   example08.html

图4-10 div高度随内容自适应

从运行结果可以看出，div的默认的宽度为100%，高度为随内容的高度自动增加，但是在真实的页面布局中，高度自动增加有可能会打乱整个页面的布局。所以在使用div盒子页面布局时都会设置其高度，但这样也可能会导致div的内容超出了其div设置的高度，通过案例4-9,来体验,效果如图4-11所示。

例4-9   example09.html

图4-11 内容溢出

由于图片的高度为380px，而div的高度设置为270px，所以图像超出了div的高度，直接溢出。对于这种情况，可以使用overflow属性来对其进行处理，修改上述代码的css属性，其基本语法格式如下：

当然也可以设置overflow: scroll，则如果有超出部分，就会自动在div中加上滚动条，如图4-12所示

图4-12 设置内容滚动

小结:

overflow:设置当html组件不够容纳内容时的显示方式，该属性支持如下几个属性值

  visible：默认值，该属性值指定即不剪切也不添加滚动条。

  auto：该属性值指定当html组件不够容纳内容时将自动添加滚动条。

  hidden：该属性值指定html组件自动裁剪那些不够空间显示的内容。

  scroll：该属性值指定html组件总是显示滚动条。