如果要防止内容把div容器或者表格撑大，可以在CSS中设置
一、
overflow: hidden; 表示如果内容超出容器大小，就把超出部分隐藏(相当于切掉)
二、
overflow: scroll; 这个表示给内容加上控制滑块，可以在容器内部拖动它查看，而不把容器撑大(相当于窗体上的控制滑块)

当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况

定义

overflow溢出

　　值: visible | hidden | scroll | auto | inherit

　　初始值: visible

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

　　[注意]除了IE7-浏览器外，其他浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

overflow-X | overflow-y

　　overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性，后来被CSS3采用，并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切

　　[注意]如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同，且其中一个值显式设置为visible或未设置默认为visible，而另外一个值是非visible的值。则visible值会被重置为auto

　　值: visible | hidden | scroll | auto | inherit | no-display | no-content

　　初始值: visible

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

属性

visible

　　元素的内容在元素框之外也可见

　　[注意1]IE6-浏览器中元素的包含块会延伸，使得可以包裹其超出的内容

.box{

    height: 200px;

    width: 200px;

    background-color: lightgreen;

}

.in{

    width: 300px;

    height: 100px;

    background-color: lightblue;

}
<div class="box">

    <div class="in"></div>

</div>

左图为IE6-浏览器，右图为其他浏览器

[注意2]IE7-浏览器的按钮(包括<button>和<input type="button">两种)存在bug，当按钮上的文字越多时，按钮两侧的padding就越大。通过设置overflow:visible就可解决该问题

　　左图为默认情况，右图为设置overflow后的情况

auto

　　如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容

　　[注意]对于一般浏览器来说，<html>和<textarea>默认带有overflow:auto的属性。但IE7-浏览器则不同，默认存在纵向滚动条

//IE7-浏览器

html{overflow-y: scroll;}

//其他浏览器

html{overflow: auto;}

//去除页面默认滚动条

html{overflow: hidden;}

scroll

　　元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容

　　[注意]firefox和IE8+浏览器在overflow:scroll或auto时，存在padding-bottom缺失现象

.box{

    width: 100px;

    height: 100px;

    padding: 50px;

    background-color: pink;

    overflow:scroll;

}

.in{

    width: 100px;

    height: 200px;

    background-color: lightgreen;

}
<div class="box">

    <div class="in"></div>

</div>

左图为chrome浏览器的情况，右图为firefox浏览器的情况

hidden

　　元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见

no-display

　　当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样

no-content

　　当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样

　　[注意]no-display和no-content这两个属性目前没有浏览器支持

失效

　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候

　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁

【解决办法】

【1】overflow元素自身为包含块

　　给父级设置position:absolute或fixed或relative

2】overflow元素的子元素为包含块

　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative

<div style="overflow:hidden;">

    <div style="position:relative">

        <div style="position:absolute">绝对定位元素</div>

    </div>

</div>

应用

　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。关于BFC的详细信息移步至此

【1】清除浮动影响

[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是

.clear{

    *zoom:;

}

.clear:after{

    content: '';

    display: block;

    clear: both;

}

【2】避免margin穿透

[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等

【3】两栏自适应布局

[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:

.cell{

    display: table-cell; width: 2000px;

    *display: inline-block; *width:auto;

}

【4】选项卡

　　overflow选项卡主要用于单页应用

<div class="box">

    <ul class="show">

        <li class="show-in" id="one">1</li>

        <li class="show-in" id="two">2</li>

        <li class="show-in" id="three">3</li>

        <li class="show-in" id="four">4</li>

    </ul>

    <nav class="con">

        <a class="con-in" href="#one">1</a>

        <a class="con-in" href="#two">2</a>

        <a class="con-in" href="#three">3</a>

        <a class="con-in" href="#four">4</a>

    </nav>

</div>
body{

    margin:;

    text-align: center;

}

ul{

    margin:;

    padding:;

    list-style: none;

}

a{

    text-decoration: none;

    color: inherit;

}

.show{

    width: 100px;

    height: 100px;

    overflow: hidden;

    border: 1px solid black;

    line-height: 100px;

    font-size: 40px;

}

.show-in{

    width: 100px;

    height: 100px;

}

#one{

    background-color: lightgreen;

}

#two{

    background-color: lightyellow;

}

#three{

    background-color: lightblue;

}

#four{

    background-color: pink;

}

.con{

    margin: 10px 0 0 10px;

    width: 100px;

}

.con-in{

    display:inline-block;

    width: 16px;

    line-height: 16px;

    border: 1px solid black;

    background-color: gray;

}

溢出overflow: hidden的更多相关文章

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

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

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

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

  3. 使用overflow:hidden处理元素溢出和坍塌

    溢出 css溢出示意如图,子元素(背景为粉色)的长度或宽度超出父元素(背景为绿色). 通过为父元素赋 overflow:hidden 样式可将子元素超出父元素的部分隐藏起来. 也可为父元素赋 over ...

  4. overflow:hidden并不隐藏所有溢出的子元素

    拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏,具体来说,需要同时满足以下条件: 拥有overflow:hidden样式的块元素不具有position:relative和p ...

  5. 关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）

    1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...

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

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

  7. 深入理解CSS溢出overflow

    × 目录 [1]定义 [2]属性 [3]失效[4]应用 前面的话 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: ...

  8. overflow:hidden的另一层含义

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是 很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  9. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

随机推荐

  1. MFC的一些常用操作

    一.添加消息 MFC和win32不同的一点是MFC采用的是消息的映射机制,即每一个消息都和处理的函数做了映射,我们可以通过查找的方式来得到消息的对应的函数,当然MFC提供了一个非常简便的方法,我们通过 ...

  2. Satellite-Hacking 攻击卫星/卫星安全

    虽说卫星安全这种东西也是高富帅才玩得起的领域,但是了解了解总是没坏处.参考了一些资料,如果想详细了解可以戳进去看看.看了这么多资料,总结一下吧. Why? 卫星存在安全问题主要有一下俩原因,首先是成本 ...

  3. MyBatis-02-第一个Mybatis程序

    2.第一个Mybatis程序 思路:搭建环境-->导入Mybatis-->编写代码-->测试! 2.1.搭建环境 搭建数据库 CREATE DATABASE `mybatis`; u ...

  4. linux weblogic的sh文件

      setDomainEnv.sh   JAVA_HOME和各种jvm参数,CLASSPATH都在这里配置 #!/bin/sh   # WARNING: This file is created by ...

  5. 快速开发MQTT（一）电子工程师眼中的MQTT

    转载:https://zhuanlan.zhihu.com/p/54669124 DigCore 主页http://www.digcore.cn 文章首发于同名微信公众号:DigCore 欢迎关注同名 ...

  6. guava的一些用法

    package guavaTest; import com.google.common.base.CharMatcher; import com.google.common.base.Joiner; ...

  7. BZOJ 3173: [Tjoi2013]最长上升子序列 (线段树+BIT)

    先用线段树预处理出每个数最终的位置.然后用BIT维护最长上升子序列就行了. 用线段树O(nlogn)O(nlogn)O(nlogn)预处理就直接倒着做,每次删去对应位置的数.具体看代码 CODE #i ...

  8. django 之csrf、auth模块及settings源码、插拔式设计

    目录 基于django中间件拷贝思想 跨站请求伪造简介 跨站请求伪造解决思路 方式1:form表单发post请求解决方法 方式2:ajax发post请求解决方法 csrf相关的两个装饰器 csrf装饰 ...

  9. jenkins 中MultiJob Phase的使用，简单的pipeline可以用这个写

  10. 线程安全 Vs 非线程安全

    线程安全:多线程访问时,采用了加锁机制,当一个线程读取数据时,其他线程不能访问直到该线程读取完毕.不会出现数据不一致或者脏数据. 非线程安全:不提供数据保护,可能出现其他线程访问时更改数据而该线程得到 ...