在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>
分享到:
相关推荐
本文将详细探讨如何通过CSS属性实现这一目标,确保外部`<div>`的宽度不会被内部`<div>`撑开。 ### CSS中的`overflow`属性 在HTML文档中,当内部元素的尺寸超过其父级元素的尺寸时,默认情况下,父级元素会自动调整...
当涉及到容器(外层 `div`)和内容元素(内层 `div`)时,有时我们需要实现一个动态高度的效果,即容器的高度能够根据其内容自动调整。标题和描述中提到的问题正是关于这个需求:如何让内部的 `div` 撑开外部的 `div...
- 当内层`div`宽度超过外层容器时,可能导致容器宽度被撑开。确保精确测量并设置宽度,或者使用百分比宽度以适应不同浏览器。 13. **高度动态问题**: - 动态内容高度最好通过JavaScript或CSS Flexbox进行处理,...
10. **高度适应问题**:在嵌套元素中,当内层元素使用margin或padding时,可能导致外层元素高度不适应。解决方法包括添加padding,设置`height:0px; overflow:hidden;`,或调整浮动和清除浮动。 11. **命名规范**:...
外层宽度可能被内层更宽的浮动元素挤破。此时,最好使用图像编辑软件如Photoshop或者Firework进行像素级的测量,确保精确度。 - 动态添加内容时,高度最好不定义,让浏览器自动伸缩。如果内容是静态的,最好预定义...
- **问题描述**:如果使用`float`布局但没有明确指定宽度,则Firefox中容器的宽度可能会被内容撑开,而IE中则会让内容换行,可能导致容器被横向撑破。 - **解决方案**:为浮动容器定义宽度,例如`width: 100%`或...
当外层元素内有浮动元素时,如果外层元素定义了`margin-top`,则在IE6下会自动生成等量的`margin-bottom`。 **解决方案**: 对外层元素设定`border`或`float`属性,可以避免此类问题的发生。 ##### 6. 背景吞吃...