在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示:
- <div style="width:300px; background-color:Red;">
- 测试
-
<div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
- 左边
-
</div>
-
</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,如以下代码所示:
- <div style="width:300px; background-color:Red; overflow:auto;">
- 外层
-
<div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
- 内层
-
</div>
-
</div>
也许有人会说,为什么设置overflow:auto之后,外层就包含了内层,而不是将溢出的那部分使用滚动条显示出来呢?这是因为没有指定外层的高度,所以它就自适应了。如果指定了外层的高度,而内层的高度又大于外层的高度,那么就会显示滚动条了。如以下代码所示。
- <div style="width:300px; background-color:Red; overflow:auto; height:80px;">
- 外层
-
<div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
- 内层
-
</div>
-
</div>
分享到:
相关推荐
外部DIV如何强制宽度不被内部DIV撑开
div中的内容没有把div撑开的原因及解决办法
DIV遮罩层 遮罩所有工作区域 简单的方法
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
通俗的讲,就是一个div内部,我们用float和margin布局元素。 BFC布局规则:1.内部的Box会在垂直方向,一个接一个地放置。2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3.每个元素...
div层的使用,div层的基本使用。包括css,div的定位
DIV弹出层.htmDIV弹出层DIV弹出层DIV弹出层DIV弹出层
非常清爽的div层,漂亮div层 精美div层
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
两种实现方法一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮。 简单一点的纯css 复制代码代码如下: <head> ”content-type”content ...
层叠样式,将一个div覆盖到另一个div上
可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV...
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码
这个例子是,div弹出层并且固定位置,弹出层的弹出方式为滑动方式。
资源主要为两层DIV,外层DIV为一个圆形,内层DIV为一个方形。方形在外层DIV随机直线轨迹运动,不超出圆边界。
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触...
DIV 层 网站设计DIV 层 网站设计DIV 层 网站设计
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 复制代码代码如下: <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...