overflow: hidden用法，不仅仅是隐藏溢出
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用法，不仅仅是隐藏溢出的更多相关文章
- overflow:hidden---清除浮动，隐藏溢出
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- 容易被误解的overflow:hidden
http://www.ofcss.com/2011/03/20/misunderstood-of-overflow-hidden.html(转) 容易被误解的overflow:hidden 15条评论 ...
- overflow:hidden失效
overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文 ...
- CSS中overflow:hidden
CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...
- overflow:hidden并不隐藏所有溢出的子元素
拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏,具体来说,需要同时满足以下条件: 拥有overflow:hidden样式的块元素不具有position:relative和p ...
- 关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）
1.overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...
- CSS学习：overflow:hidden解决溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌. CSS样式: .container{ background-color: bla ...
- 使用overflow:hidden处理元素溢出和坍塌
溢出 css溢出示意如图,子元素(背景为粉色)的长度或宽度超出父元素(背景为绿色). 通过为父元素赋 overflow:hidden 样式可将子元素超出父元素的部分隐藏起来. 也可为父元素赋 over ...
- overflow:hidden的用法
overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <%@ Page Language="C#& ...
随机推荐
- app与server联系
--- /frameworks/base/services/java/com/android/server目录下SystemServer.java 在ServerThread的run函数中增加加载Rf ...
- Covariance and Contravariance in C#, Part One
http://blogs.msdn.com/b/ericlippert/archive/2007/10/16/covariance-and-contravariance-in-c-part-one.a ...
- usaco4.12Fence Rails(迭代加深)
为了这题还去学了下迭代加深 回来还是不会写 只好参考各大神的代码及题解了 二分枚举最大可以切的块数 然后就是各种分析及优化 USACO题解里写了7个优化.. 问题分析 抽象一下就可以发现,算法的本质是 ...
- 归纳决策树ID3（Java实现）
先上问题吧,我们统计了14天的气象数据(指标包括outlook,temperature,humidity,windy),并已知这些天气是否打球(play).如果给出新一天的气象指标数据:sunny,c ...
- Win系统下制作U盘CLOVER引导+安装原版Mavericks10.9
啃苹果有一段时间了,之前一直用白苹果,但是白苹果配置有所限制,对于我搞音频的人来讲,显得有点拖沓.所以研究了将近2年的黑苹果,最近心血来潮给大家一个比较傻瓜式的教程,首先强调一点,黑苹果是需要折腾的, ...
- 求助：IIS中部署WCF，生成的WSDL中怎么把“计算机名”改成IP==找到一个解决办法
环境:win2003 IIS6 VS2008 求助: 如图: 有朋友遇到过这个问题吗?还是说这个不是问题? 先 谢谢了! 补充配置文件: 代码 目前解决办法: 修改IIS的配置: 如图: 解决后的ws ...
- GotFocus和PreviewLeftButtonDown事件
当TextBox获得焦点后,其中的文字会被全选.通过GotFocus和PreviewLeftButtonDown事件,就可以模拟上述行为. 如果用户只是用键盘操作,GotFocus事件就足够了. 如果 ...
- Http get,post,soap协议的区别
转自:http://www.cnblogs.com/c2303191/articles/1107027.html 1.Http作为web服务的首选协议,具有4大优点:1)http非常简单,以纯文本(超 ...
- 自动化测试实施的几个idea
UI检查.测试的一个idea 在电子商务网站中, 为达到较好的用户体验, 可能页面上会有大量的UI设计,一堆css.ajax效果等,敏捷开发中, UI变动更是带来了测试的苦恼.对于回归组catch U ...
- Unity的Lerp函数实现缓动
在Unity里面Lerp函数可以实现缓动效果 下面例子实现点光源的移动 在场景中创建好一个平面,一个点光源,我在这里随便放了一个模型. 然后新建c#脚本,代码如下: using UnityEngine ...