让内层将外层撑开

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

1. <div style="width:300px; background-color:Red;"> 
2.     测试  
3.     <div style="width:100px; height:100px; background-color:Green; 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; background-color:Red; overflow:auto;"> 
2.     外层  
3.     <div style="width:100px; height:100px; background-color:Green; float:left; margin:10px;"> 
4.         内层  
5.     </div> 
6. </div> 

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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索属性
， 滚动
， overflow
， 高度
， js溢出滚动
， 内层
外层
内层div撑开外层div、内层vlan 外层vlan、外层vlan和内层vlan、内层包封和外层包封、内层div超出外层，以便于您获取更多的相关知识。