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

  1.  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
  2.  
  3.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5.  <html xmlns="http://www.w3.org/1999/xhtml">
  6.  <head runat="server">
  7.      <title></title>
  8.      <style type="text/css">
  9.          * {margin:;padding:;}
  10.          #wrap {background:#00C;margin: auto;width:960px;}
  11.          #header {background:#FF3300;width:%;}
  12.          #mainbody {background:#FC0;}
  13.          .left {width:800px;height:200px;background:#adf;float:left;}
  14.          .right {width:140px;height:500px;background:#;float:right;}
  15.          #footer {background:#;width:%;}
  16.  </style>
  17.  </head>
  18.  <body>
  19.      <form id="form1" runat="server">
  20.      <div id="wrap">
  21.          <div id="header">头部</div>
  22.          <div id="mainbody">
  23.              <div class="left"></div>
  24.              <div class="right"></div>
  25.          </div>
  26.          <div id="footer">版权部分</div>
  27.      </div>
  28.      </form>
  29.  </body>
  30.  </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来隐藏子元素相对于父元素的超界溢出，如下所示。

  1.  #mainbody {background:#FC0;overflow:hidden;height:200px;}//父div的高度比子div的最大高度值小，所以会隐藏子div的一部分内容。
  2.  .left {width:800px;height:200px;background:#adf;float:left;}
  3.  .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. javascript阻止事件冒泡的方法

    有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...

  2. 《Andrew Ng深度学习》笔记3

    浅层神经网络 初步了解了神经网络是如何构成的,输入+隐藏层+输出层.一般从输入层计算为层0,在真正计算神经网络的层数时不算输入层.隐藏层实际就是一些算法封装成的黑盒子.在对神经网络训练的时候,就是对神 ...

  3. Difference **面向过程（或者叫结构化）分析方法**面向对象分析方法

    面向过程和面向对象的区别 面向过程是分析出解决问题所需要的步骤,然后一步步实现,面向对象是把构成问事件分解成各个对象,建立对象的目的是为了描述某个事物在整个解决问题的步骤中的行为. 可以说面向对象是从 ...

  4. Android 线程+Handler的使用

    1.介绍 2.线程的使用 (1)启动 (2)执行 3.xml布局 <?xml version="1.0" encoding="utf-8"?> &l ...

  5. Android ToggleButton(开关函数)与switch (开关按钮)

    1.ToggleButton (1)介绍 (2)组件形状 (3)xml文件设置 <?xml version="1.0" encoding="utf-8"? ...

  6. pyhton学习，day1作业，用户名密码登录模块

    要求,通过用户名密码登录,登录错误3次,锁定用户名 # coding=utf-8 # Author: RyAn Bi import os, sys #调用系统自己的库 accounts_file = ...

  7. 非阻塞模式ServerSocketChannel 聊天室服务器端

    import java.io.IOException; import java.net.InetSocketAddress; import java.nio.ByteBuffer; import ja ...

  8. CentOS7下php安装mcrypt扩展

    https://blog.csdn.net/skykingf/article/details/40185405 以下步骤均为本人实际操作,可能与你的安装方法有所区别,但我会尽量排除疑惑) 大致步骤(1 ...

  9. Oracle Merge 使用

    <转自> http://blog.csdn.net/nsj820/article/details/5755685 Oracle9i引入了MERGE命令,你能够在一个SQL语句中对一个表同时 ...

  10. PIE SDK介绍

    1. 产品概述 PIE-SDK是航天宏图自主研发的PIE二次开发组件包,集成了专业的遥感影像处理.辅助解译.信息提取.专题图表生成.二三维可视化等功能.底层采用微内核式架构,由跨平台的标准C++编写, ...