overflow属性可以设置的值有5种:

(1)visible  默认值,内容不会裁剪,呈现在元素框之外;

(2)hidden 内容会被裁剪,并且子元素内容是不可见的;

(3)scroll 内容会被裁剪,但溢出的内容可以拖动浏览器自带的滚动条,查看内容;

(4)auto 如果内容被裁剪,那么溢出的内容也是拖动移动浏览器自带的滚动条,查看内容;

(5)inherit 继承父元素的overflow属性的值。

在实际运用中,除了hidden的应用比较多而灵活,其他几个还是很好理解和运用的。所以,这里着重归纳了hidden的用法。

(1)清除浮动

<div class="wrap">
  <p>test of css</p>
</div>
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {float: left;}

(2)阻止边距外折叠

<div class="wrap">
  <p>test of css</p>
</div>
body,p {padding: 0;margin: 0;}
.wrap {overflow: hidden;zoom:1;background-color: #ccc;}
.wrap p {margin-top: 20px;}

(3)在IE-6,解决定义1px高的块元素

<div class="line"></div> 
.line {height: 1px;overflow: hidden;} 

(4)创建两栏布局

<div class="left"></div>
<div class="right"></div>
div {height: 500px;}
.left {float: left;background-color: #000;width: 200px;margin-right: 5px;}
.right {overflow: hidden;zoom:1;background-color: #ccc;}

以上这4种还是比较常用的。但是在做项目的时候,发现了一个问题:父元素是必须overflow:hidden的,大多数情况下,其子元素是内容超出会被截掉,如图:

显然,这是一个bug。其解决方案:

将需要overflow:hidden和父元素的高度保持一致,不可以出现padding/margin边距值。

此外,有2种情况设置overflow:hidden时,内容是不会被裁剪:

  1.有overflow:hidden样式的块元素不具有position:relative和position:absolute样式;

  2.内部溢出的元素是通过position:absolute绝对定位

overflow应用场景的更多相关文章

  1. overflow遭遇场景

    没有设置高度而由内容撑高的子div在遇到固定高度的父div,想做一个离上边缘有间距的效果,给padding-top会同时撑大父div,给margin-top会把父div拉下来,这时候的子div像是紧紧 ...

  2. 前端之CSS(二)

    一.盒子模型 说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/tran ...

  3. Python之路【第十一篇续】前端之CSS补充

    CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...

  4. 初识CSS

    css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...

  5. 前端 css续

    CSS选择器 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,找到所有的标签应用以下样式 ...

  6. 【转载】C# 中的委托和事件(详解)

    <div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...

  7. overflow:hiddden与绝对定位的应用场景的事例

    做一个点击查看显示详细信息的效果. 说一下问题描述,最外面的父元素overflow-parent设置了overflow:hidden, 然后子元素overflow-child没有设置overflow, ...

  8. tcp_tw_reuse、tcp_tw_recycle 使用场景及注意事项

    linux TIME_WAIT 相关参数: net.ipv4.tcp_tw_reuse = 表示开启重用.允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭 net.i ...

  9. -Three.js开发指南---用three.js创建你的第一个三维场景(第一章)

    本章主要做了下面的工作 1 生成一个简单的场景,该场景的物体只有平面和坐标轴 2 在第一个demo的基础上添加光源和方块物体,并生成阴影 3 在第二个demo的基础上,增加动画,使得方块进行旋转 4 ...

随机推荐

  1. XML转换成数组方法

    <?php function xmlToArray2($xml) { // 将XML转为array $array_data = json_decode(json_encode(simplexml ...

  2. wpf的MVVM框架

    http://www.cnblogs.com/KnightsWarrior/archive/2010/11/01/1866641.html 框架名字的介绍在 文章的后面

  3. python3----模块(序列化(json&pickle)+XML+requests)

    一.序列化模块 Python中用于序列化的两个模块: json     跨平台跨语言的数据传输格式,用于[字符串]和 [python基本数据类型] 间进行转换 pickle   python内置的数据 ...

  4. Django admin 的 9 个技巧

    Tip 1:Django admin 后台不限于用 Django 开发的网站 虽然 Django admin 管理界面可以非常友好的用在 Django 项目的其它部分,它同样可以很容易用于其它像传统的 ...

  5. iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码

    开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...

  6. iOS开源库–最全的整理

    本文转载至 http://www.code4blog.com/archives/505 youtube下载神器:https://github.com/rg3/youtube-dl我擦咧vim插件:ht ...

  7. Android实例-退出程序

    Android实例-退出程序 http://www.cnblogs.com/FKdelphi unit Unit1; interface uses System.SysUtils, System.Ty ...

  8. 通用且常用的Java正则匹配工具,用以检查邮箱名、电话号码、用户密码、邮政编码等合法性

    一个通用且常用的Java正则匹配工具,用以检查邮箱名.电话号码.用户密码.邮政编码等合法性. import java.util.regex.Matcher; import java.util.rege ...

  9. 延迟任务和循环任务ScheduledExecutorService

    public class ScheduledThreadPool { public static ScheduledExecutorService scheduledThreadPool = Exec ...

  10. reg_action

    function check_email($win) { $win = trim($win); $reg = '/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* ...