引用自: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的高度

DIV撑开的更多相关文章

  1. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  2. 让内层Div将外层Div撑开

    在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...

  3. 让内层浮动的Div将外层Div撑开 -----清浮动

    清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版. <div class="parent" style="width ...

  4. html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)

    浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...

  5. 第二个div+css前端项目

    先展示效果图: 为了看全景,截图有点挫.实际效果比这个好一点. 通过 text-overflow可以隐藏多出的文字,而不会吧把div撑开或者溢出. html代码: <!DOCTYPE html& ...

  6. (转载)html中div使用自动高度

    为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签:     static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...

  7. 纯css实现长宽等比例的div

    现代网站页面基本都需要响应式,一个div的长宽往往我们都设置为百分之多少,这个百分之是相对于父容器动态计算的 这样在浏览器宽度变化之后,我们的元素也能自动更新长宽.例如:我们在页面上摆了一个div,这 ...

  8. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  9. height与line-height的深入理解及应用

    转载:原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高" ...

随机推荐

  1. leetcode70

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  2. JavaScript高级程序设计:第十一章

    一.选择符API SelectorsAPILevel 1的核心是两个方法:querySelector()和querySelectorAll(). 1. querySelector()方法 queryS ...

  3. JDK1.5与1.6在Override上的区别

    @Override是JDK5 就已经有了,但有个小小的Bug,就是不支持对接口的实现,认为这不是Override 而JDK6 修正了这个Bug,无论是对父类的方法覆盖还是对接口的实现都可以加上@Ove ...

  4. hdu_5787_K-wolf Number(数位DP)

    题目链接:hdu_5787_K-wolf Number 题意: 给你一个区间,让你找满足任意k个数位内都没有相同的数字的个数 题解: 因为k不大,就直接将当前pos的前k-1个数传进去就行了 #inc ...

  5. Java程序输出打字

    代码: 效果:

  6. Eclipse/MyEclipse中使用复制粘贴功能卡的解决办法

    最近在MyEclipse中编辑代码时,使用快捷键进行复制粘贴,经常会导致编辑器短暂的停顿,光标不跟随,居然反应不过来,几近假死. 想来想去应该是编辑上的什么配置或者是IDE的什么功能导致,于是进入Pr ...

  7. LVS负载均衡的三种模式和八种算法总结

    三种LVS负载均衡模式 调度器的实现技术中,IP负载均衡技术是效率最高的,IP虚拟服务器软件(IPVS)是在linux内核中实现的。 LVS负载均衡模式---1.NAT模式 NAT用法本来是因为网络I ...

  8. Entity Framework 学习高级篇1—改善EF代码的方法(上)

    本节,我们将介绍一些改善EF代码的相关方法,如NoTracking,GetObjectByKey, Include等. l         MergeOption.NoTracking 当我们只需要读 ...

  9. Rsync数据远程同步备份

    rsync的使用方法 一.设置Rsync Server端 Rsync server需要设定四个方面: 1.规划建立备份目录区 2.设定: /etc/xinetd.d/rsync 3.设定: /etc/ ...

  10. HDU 5963 博弈

    http://acm.hdu.edu.cn/showproblem.php?pid=5963 题目大意:中文题 思路:看ICPC camp好了,简单易懂:https://async.icpc-camp ...