引用自：http://radzhang.iteye.com/blog/1678734

在CSS排版中，如果一个层中的层使用了float浮动的话，那么就有可能会出现外层没有被内层撑开的情况，如以下代码所示：

  1. <div style="width:300px; ">
  2. 测试
  3. <div style="width:100px; height:100px;  float:left; margin:10px;">
  4. 左边
  5. </div>
  6. </div>

如果要解决这个问题，可以在外层的CSS中加上“overflow:auto”。

在CSS中overflow属于用来说明当内容溢出元素框时要怎么处理，从上图中可以看出，内层已经溢出了外层，所以需要使用overflow属性来指如何显示内层中。overflow属性的默认值是visible，也就是不管它是怎么溢出的，溢出的内容不裁剪，任其显示在元素框外面。

除了visible值之后，overflow属性还有以下几个值：

  • hidden：内容会被裁剪，溢出的部分看不到。
  • scroll：使用滚动条来查看溢出的部分，始终显示滚动条。
  • auto：如果内容需要裁剪，则等于scroll，显示滚动条；否则不显示滚动条。
  • inherit：从父元素中继承overflow属性值。不过以前的IE版本都不支持该属性值，包括IE8，IE9还没试过。

由于本例中，外层的CSS没有指定overflow属性，所以默认为visible，也就是不管它怎么个溢出法，所以，只要将外层的CSS中加上overflow:auto，如以下代码所示：

  1. <div style="width:300px;  overflow:auto;">
  2. 外层
  3. <div style="width:100px; height:100px;  float:left; margin:10px;">
  4. 内层
  5. </div>
  6. </div>

也许有人会说，为什么设置overflow:auto之后，外层就包含了内层，而不是将溢出的那部分使用滚动条显示出来呢？这是因为没有指定外层的高度，所以它就自适应了。如果指定了外层的高度，而内层的高度又大于外层的高度，那么就会显示滚动条了。如以下代码所示。

  1. <div style="width:300px;  overflow:auto; height:80px;">
  2. 外层
  3. <div style="width:100px; height:100px;  float:left; margin:10px;">
  4. 内层
  5. </div>
  6. </div>

注：div内的控件如果设置了position:absolute 那么div将不被自动撑开，必须设置为relative；如果的确需要absolute，那么只有固定设置div的高度

最新文章

  1. Bubble Cup 8 finals C. Party (575C)
  2. CentOS 7 恢复 Windows 启动项
  3. SpringMVC之controller篇
  4. mysql select语句解析
  5. WebScarab使用说明
  6. ORA-01089 数据库无法正常关闭
  7. hdu 2295 DLX
  8. DTCMS通用分页列表
  9. Json 使用小结
  10. 查看端口号他所占用的exe应用程序
  11. JavaScript学习笔记（十五）——对象之Date，RegExp
  12. Deploying Customizations in Oracle E-Business Suite Release 12.2
  13. Vue-zTree
  14. pwnable.kr详细通关秘籍（二）
  15. Android IPC机制（三）使用AIDL实现跨进程方法调用
  16. Plugin &#39;Lombok Plugin&#39; is incompatible with this installation
  17. MyBatis SpringMVC映射配置注意
  18. Java开发人员必会的基本Linux命令（转）
  19. ActiveMQ topic 普通订阅和持久订阅
  20. 转载：mysql添加用户、删除用户、授权、修改密码

热门文章

  1. android Handler vs Timer
  2. html 框架属性
  3. linux下base命令
  4. android网络开发之测试机连接到服务器上面
  5. Why isn&#39;t sizeof for a struct equal to the sum of sizeof of each member?
  6. 安卓之PreferenceActivity分享
  7. Redis配置文件 翻译 V3.2版本
  8. THE ROAD TO PROGRAM
  9. listener、context、filter、servlet及其加载顺序
  10. UML类图图示样例