overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
* {margin:;padding:;}
#wrap {background:#00C;margin: auto;width:960px;}
#header {background:#FF3300;width:%;}
#mainbody {background:#FC0;}
.left {width:800px;height:200px;background:#adf;float:left;}
.right {width:140px;height:500px;background:#;float:right;}
#footer {background:#;width:%;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</form>
</body>
</html>

说明:图中定义了5个div,并且主体部分的2个div分别为左右浮动。浏览器效果图为:

overflow:hidden的用法-LMLPHP

当父div (mainbody)没有规定height值,子div浮动后,父div中的布局就会发生错乱。
如何让子div再次将父div的高度撑开呢?固然将父div也浮动起来是比较常用的做法,其实还可以使用overflower:hidden来清除浮动带来的影响。

前提是父div没有设置高度的情况下,使用overflow:hidden;后会把父div撑开。

#mainbody {background:#FC0;overflow:hidden;}

效果图如下:

overflow:hidden的用法-LMLPHP

当然,我们以前用的最多的还是使用overflow:hidden来隐藏子元素相对于父元素的超界溢出,如下所示。

 #mainbody {background:#FC0;overflow:hidden;height:200px;}//父div的高度比子div的最大高度值小,所以会隐藏子div的一部分内容。
.left {width:800px;height:200px;background:#adf;float:left;}
.right {width:140px;height:500px;background:#;float:right;}

给父div加上固定高度后,再使用overflow: hidden将会隐藏掉子元素超出的那一部分,如下图:

overflow:hidden的用法-LMLPHP

因此我们可以尝试这样总结:当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开。

当父元素自身设置了height属性值,则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。

05-11 09:36
查看更多