overflow:hidden是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <style type="text/css">
9 * {margin:0;padding:0;}
10 #wrap {background:#00C;margin:0 auto;width:960px;}
11 #header {background:#FF3300;width:100%;}
12 #mainbody {background:#FC0;}
13 .left {width:800px;height:200px;background:#adf;float:left;}
14 .right {width:140px;height:500px;background:#690;float:right;}
15 #footer {background:#639;width:100%;}
16 </style>
17 </head>
18 <body>
19 <form id="form1" runat="server">
20 <div id="wrap">
21 <div id="header">头部</div>
22 <div id="mainbody">
23 <div class="left"></div>
24 <div class="right"></div>
25 </div>
26 <div id="footer">版权部分</div>
27 </div>
28 </form>
29 </body>
30 </html>说明：图中定义了5个div，并且主体部分的2个div分别为左右浮动。浏览器效果图为：
当父div （mainbody）没有规定height值，子div浮动后，父div中的布局就会发生错乱。
如何让子div再次将父div的高度撑开呢？固然将父div也浮动起来是比较常用的做法，其实还可以使用overflower:hidden来清除浮动带来的影响。
前提是父div没有设置高度的情况下，使用overflow:hidden;后会把父div撑开。
1 #mainbody {background:#FC0;overflow:hidden;}
效果图如下：
当然，我们以前用的最多的还是使用overflow:hidden来隐藏子元素相对于父元素的超界溢出，如下所示。
1 #mainbody {background:#FC0;overflow:hidden;height:200px;}//父div的高度比子div的最大高度值小，所以会隐藏子div的一部分内容。
2 .left {width:800px;height:200px;background:#adf;float:left;}
3 .right {width:140px;height:500px;background:#690;float:right;}给父div加上固定高度后，再使用overflow: hidden将会隐藏掉子元素超出的那一部分，如下图：
因此我们可以尝试这样总结：当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。
当父元素自身设置了height属性值，则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。
760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
