在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>

原文链接:http://radzhang.iteye.com/blog/1678734

让内层Div将外层Div撑开的更多相关文章

  1. IE浏览器中overflow:hidden无效,内层元素超出外层div的解决方法

    原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...

  2. div嵌套引起的内层margin-top对外层div起作用

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

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

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

  4. 【div+css】两个div,如何让内层的div在外层div中水平垂直居中

    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...

  5. css让内层div自动撑开外层div

    .clear{clear:both;height:0px;font-size: 1px;line-height: 0px;} <div class="audi_items"& ...

  6. [CSS][转载]内层div的margin-top影响外层div

    参考 内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法 我使用的是在外层的div中添加 border: 1px soli ...

  7. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  8. 外层div高度不随内层div高度改变的解决办法

    当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开. <div id=“div1″> <div id=”div2″ style="float: ...

  9. bootstrap中实现外层DIV自适应,内层DIV宽度固定且居中的布局

    <!DOCTYPE html><html> <head> <link rel="stylesheet" href="css/bo ...

随机推荐

  1. C#多线程编程(转)

    一.使用线程的理由 1.可以使用线程将代码同其他代码隔离,提高应用程序的可靠性. 2.可以使用线程来简化编码. 3.可以使用线程来实现并发执行. 二.基本知识 1.进程与线程:进程作为操作系统执行程序 ...

  2. DBA_Oracle Sort排序处理空间耗用(概念)

    2014-12-18 Created By BaoXinjian

  3. kuangbin RMQ

    这是kuangbin的RMQ,一维的,代码很简洁,附上: //kuangbin templet(查询最大值) 一维 //若想查最小,看提示更改 + ; ];//第二维是范围,即2^20约等于100万 ...

  4. JAVA 方法重载

    方法的重载是指:一个类中可以定义有相同的名字,但参数不同的多个方法,调用时会根据不同的参数列表选择对应的方法. 实例: W.java public class W{ public void F(Str ...

  5. 使用maven下载依赖包及maven常见问题汇总

    最近下载了SPRING3.1.4,发现只有SPRING相关的源码,没有其依赖的jar包.SPRING依赖的jar相当多,自己一个一个的下载比较费劲,就仔细阅读了SPRING下载说明,新版本的SPRIN ...

  6. arm-linux-ld

    arm-linux-ld 直接指定代码段,数据段,BSS段的起始地址 -Ttest startaddr -Tdata startaddr -Tbss startaddr 示例: arm-linux-l ...

  7. PHP的require()函数可以在一行代码中多次读取

    [root@NJ232:~]$[root@NJ232:~]$more tt.php m#!/opt/php/bin/php -q<?phpwhile(1){ sleep(2); $arr = r ...

  8. [Flex] Accordion系列 - Header背景图的设置

    <?xml version="1.0" encoding="utf-8"?> <!--Flex中如何通过getHeaderAt()函数以及se ...

  9. eclips中增加对jar包的引用

    http://jingyan.baidu.com/article/ca41422fc76c4a1eae99ed9f.html

  10. C Primer Plus(第五版)7

    第 7 章 C 控制语句:分支和跳转 在本章中你将学习下列内容: · 关键字:if(如果),else(否则),switch(切换),continue(继续),break(中断), case(情况),d ...