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

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<style type="text/css">

		#div1{

			width: 200px;

			/*height: 50px;*/

			padding: 10px 20px 20px 10px;

			background: red;

			margin: 0 auto;

		}

		#div2{

			width: 100px;

			height: 100px;

			background: green;

			float: left;

		}

	</style>

</head>

<body>

	<div id="div1" >

  	<div id="div2" ></div>

	</div>

</body>

</html>
图中代码定义了两个div，并且子div是规定左浮动的。不难想像浏览器中打开的效果图：




当父div没有规定height值，子div浮动后，父div只剩下padding-top+padding-bottom的30px.


如何让子div再次将父div的高度撑开呢？固然将父div也浮动起来是比较常用的做法，其实还可以使用overflower:hidden来清除浮动带来的影响。




#div1{

	width: 200px;

	/*height: 50px;*/

	padding: 10px 20px 20px 10px;

	background: red;

	margin: 0 auto;

	overflow: hidden;

}





效果如下:




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




#div1{

	width: 200px;

	height: 50px;

	padding: 10px 20px 20px 10px;

	background: red;

	margin: 0 auto;

	overflow: hidden;

}





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


　　


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


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


											
overflow: hidden用法，不仅仅是隐藏溢出的更多相关文章
	

    
								
  1. overflow:hidden---清除浮动，隐藏溢出
		
    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
    
		
    2. 
						
  2. 容易被误解的overflow:hidden
		
    http://www.ofcss.com/2011/03/20/misunderstood-of-overflow-hidden.html(转) 容易被误解的overflow:hidden 15条评论 ...
    
		
    3. 
						
  3. overflow:hidden失效
		
    overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文 ...
    
		
    4. 
						
  4. CSS中overflow:hidden
		
    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...
    
		
    5. 
						
  5. overflow:hidden并不隐藏所有溢出的子元素
		
    拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏,具体来说,需要同时满足以下条件: 拥有overflow:hidden样式的块元素不具有position:relative和p ...
    
		
    6. 
						
  6. 关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）
		
    1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...
    
		
    7. 
						
  7. CSS学习：overflow:hidden解决溢出,坍塌,清除浮动
		
    overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌. CSS样式: .container{ background-color: bla ...
    
		
    8. 
						
  8. 使用overflow:hidden处理元素溢出和坍塌
		
    溢出 css溢出示意如图,子元素(背景为粉色)的长度或宽度超出父元素(背景为绿色). 通过为父元素赋 overflow:hidden 样式可将子元素超出父元素的部分隐藏起来. 也可为父元素赋 over ...
    
		
    9. 
						
  9. overflow:hidden的用法
		
    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <%@ Page Language="C#& ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 存储过程中“Select Top 变量”的问题如何解决
			
    在SqlServer2005中,可以这样: DECLARE @p int SELECT TOP (@p) * FROM 表名 在SqlServer2000中,不支持以上方法,可以这样: DECLARE ...
    
			
    2. 
						
  2. BZOJ_1617_[Usaco2008_Mar]_River_Crossing_渡河问题_(动态规划)
			
    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1617 FJ要把\(n\)头奶牛用船运到河对岸.FJ自己在船上要用\(m\)时间,如果运送\(i ...
    
			
    3. 
						
  3. cogs_396_魔术球问题_(最小路径覆盖+二分图匹配,网络流24题#4)
			
    描述 http://cojs.tk/cogs/problem/problem.php?pid=396 连续从1开始编号的球,按照顺寻一个个放在n个柱子上,\(i\)放在\(j\)上面的必要条件是\(i ...
    
			
    4. 
						
  4. PHP数组排列
			
    一.先看最简单的情况.有两个数组: $arr1 = array(1,9,5);$arr2 = array(6,2,4); array_multisort($arr1,$arr2); print_r($ ...
    
			
    5. 
						
  5. VM Depot 分布式计算框架主题应用精选
			
     发布于 2014-12-24 作者 陈 忠岳 在前几期为各位介绍了大数据应用主题以及开发运营主题的各类镜像后,这次我们精选了 VM Depot 站点中分布式计算相关主题的虚拟机镜像和大家一起分享 ...
    
			
    6. 
						
  6. [转]用C#实现的条形码和二维码编码解码器
			
    条形码的标准: 条形码的标准有ENA条形码.UPC条形码.二五条形码.交叉二五条形码.库德巴条形码.三九条形码和128条形码等,而商品上最常使用的就是EAN商品条形码.EAN商品条形码亦称通用商品条形 ...
    
			
    7. 
						
  7. XML的SelectNodes使用方法以及XPath
			
    XPath 是 XML 的内容,这里 SelectNodes 是 C# 中 XmlDocument 或 XmlNode 的一个方法.SelectNodes 使用 XPath 来选取节点. 重要语法 S ...
    
			
    8. 
						
  8. 理解iPhone高清分辨率的问题
			
    理解iPhone高清分辨率的问题可以有两个关键切入点: 1.像素坐标普通屏是480*320,Retina屏是960*640,而逻辑坐标系同为480*320: 2.Retina屏幕一个逻辑坐标点坐标包含 ...
    
			
    9. 
						
  9. 文件同步工具BT Sync介绍和使用说明
			
    BT Sync介绍 BT 下载,相信大伙儿都知道的.今儿个要介绍的 BT Sync,跟 BT 下载一样,都是 BitTorrent 公司发明滴玩意儿,都是采用 P2P 协议来进行传输. 简而言之,BT ...
    
			
    10. 
						
  10. CentOS下源码安装Apache2.4+PHP5.4+MySQL5.5
			
    一.准备(把所有的源文件放在‘/home/yuanjun’目录下) apr http://mirror.bjtu.edu.cn/apache/apr/apr-1.4.6.tar.gz apr-util ...
    
			
    11.