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分别为左右浮动。浏览器效果图为：

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

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

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

效果图如下：

当然，我们以前用的最多的还是使用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可以清除浮动，使得父元素的高度依旧是靠子元素撑开。

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

overflow:hidden的用法的更多相关文章

  1. CSS学习：overflow:hidden解决溢出,坍塌,清除浮动

    overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌. CSS样式: .container{ background-color: bla ...

  2. overflow: hidden用法，不仅仅是隐藏溢出

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

  3. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  4. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  5. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  6. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. overflow:hidden清楚浮动的影响

    在网页布局中有时会遇到这种情况: 如果左边用<dt>,右边用<dd>,放在一行显示,<dt>要设置float:left,这个应该都知道,问题是,第一行这样做没有问题 ...

  8. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

  9. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

随机推荐

  1. C语言——从入门到精通，从精通到放弃

    从第一次在CB上运行处 Hello World开始,哈哈哈哈,便开始各种幻想,哈哈哈哈,想着这就入门了,哈哈哈哈,我果然是个天才,哈哈哈哈. 后来啊,if-else语句,for 语句,while语句, ...

  2. SDUT OJ 数据结构实验之串一：KMP简单应用 && 浅谈对看毛片算法的理解

    数据结构实验之串一:KMP简单应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...

  3. php Apache No input file

    RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 变为 RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]

  4. Codeforces 1136D Nastya Is Buying Lunch (贪心）

    题意: 给一个序列和一组交换序列(a,b),当且仅当a在b的前面(不允许有间隔),这两个数才能交换,问最后一个数最多能移动多少个位置. 分析: 这题是思路是十分的巧妙呀 , 用一个数组num[x]  ...

  5. HDU 6299 Balanced Sequence(贪心)

    题目:给出N个只有左右括号字符串 ,这N个字符串的排列顺序是任意的 , 问按最优的排序后 , 得到最多匹配的括号个数 分析: 我们很容易的想到 字符串)()()(( , 这样的字符串可以精简为)(( ...

  6. BZOJ - 3757 树上莫队解决离线路径问题 & 学习心得

    题意:给你一棵树,求u,v最短路径的XXX(本题是统计权值种类) 今天课上摸鱼学了一种有意思的处理路径方式(其实是链式块状树翻车了看别的),据说实际运行跑的比XX记者还快 大概就是像序列莫队那样 首先 ...

  7. Axis 生成客户端client stub文件

    [转自] http://blog.csdn.net/qiao000_000/article/details/5568442 开发前,有个同事先给我们不熟悉Web Service的程序员进行了一些培训, ...

  8. python time,random，os,sys,序列化模块

    一.time模块 表示时间的三种方式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: (1)时间戳(timestamp) :通常来说,时间戳 ...

  9. C++ GUI Qt4编程(03)-1.3layout

    1. 根据C++ GUI Qt4编程(第二版)整理2. 系统:centos7:  Qt版本:5.5.13. 程序:layout.cpp #include <QApplication> #i ...

  10. android 无线调试 [无需数据线][无需root]

    无线调试首要条件在同一网段,打开开发者模式 1,打开 5555 端口 使用数据线链接手机,在命令窗口执行:adb tcpip 5555 2,adb 链接手机调试 这时无需数据线了,在命令窗口执行:ad ...