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#& ...
随机推荐
- JNI编程(一) —— 编写一个最简单的JNI程序
来自:http://chnic.iteye.com/blog/198745 忙了好一段时间,总算得了几天的空闲.貌似很久没更新blog了,实在罪过.其实之前一直想把JNI的相关东西整理一下的,就从今天 ...
- Wpf配置文件属性
public MainWindow() { InitializeComponent(); this.WindowState = Properties.Settings.Default.WindowSt ...
- 从头开始编写一个Orchard网上商店模块(2) - 配置您的Orchard开发环境
原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-par ...
- FlowLayoutPanel autowrapping doesn't work with autosize
There is no such thing like impossible in software development. Impossible just takes longer. I've i ...
- LightOJ 1214 Large Division 水题
java有大数模板 import java.util.Scanner; import java.math.*; public class Main { public static void main( ...
- HDU 4135 Co-prime
思路:直接用求(b,1)范围内互质的数,(a-1,1)范围内互质的数.再求反 就是敲一下容斥模板 #include<cstdio> #include<cstring> #inc ...
- c++面试常见160问
1.在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"?答:首先,extern是C/C++语言中表明函数和全局变量作用范围的关键字,该关键字告诉编译器,其 ...
- Android 多线程 异步加载
Android 应用中需要显示网络图片时,图片的加载过程较为耗时,因此加载过程使用线程池进行管理, 同时使用本地缓存保存图片(当来回滚动ListView时,调用缓存的图片),这样加载和显示图片较为友好 ...
- Linux vim的一些命令
一.vi/vim的多行注释及取消注释 1.多行注释 (1) 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 (2) 按大写字母 ...
- 问题-delphi XE2 Stack Overflow- save your work and restart CodeGear
问题现象:某一天,启动DLEPHI XE2 后,新建一个工程,双击一个事件,“Stack Overflow- save your work and restart CodeGear delphi xe ...