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;960px;} 11 #header {background:#FF3300;100%;} 12 #mainbody {background:#FC0;} 13 .left {800px;height:200px;background:#adf;float:left;} 14 .right {140px;height:500px;background:#690;float:right;} 15 #footer {background:#639;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 {800px;height:200px;background:#adf;float:left;} 3 .right {140px;height:500px;background:#690;float:right;}
给父div加上固定高度后，再使用overflow: hidden将会隐藏掉子元素超出的那一部分，如下图：
因此我们可以尝试这样总结：当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。
当父元素自身设置了height属性值，则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。