参考链接：https://www.cnblogs.com/yanyanstyle/p/11320893.html

定义

overflow属性规定当内容溢出元素框时发生的事情，即当一个元素为某个固定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况

属性值：

应用于：块级元素、替换元素、表单元格
继承性：无

  • visible：初始值，内容不会被修剪，会呈现在元素框之外
  • scroll：内容会被修建，但是浏览器会显示滚动条
  • hidden：内容会被修剪，并且其余内容不可见
  • auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其余的内容
  • inherit：
  • no-content：
  • no-display：

overflow-x和overflow-y用于定义对水平垂直方向内容溢出的剪切。

auto

  • 如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容。
  • 对于一般浏览器来说，html和textarea默认带有overflow:auto的属性。但IE7-浏览器则不同，默认存在纵向滚动条 
//IE7-浏览器 
html{overflow-y: scroll;}
//其他浏览器
html{overflow: auto;}
//去除页面默认滚动条
html{overflow: hidden;}

scroll

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

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可以实现一些相关应用。
【1】清除浮动影响
【2】避免margin穿透
【3】两栏自适应布局
【4】选项卡

----补充：

  • 非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。一个段落的文本内容都放在该元素本身之内，这个段落就是非替换元素。
  • 替换元素：这是指用作为其他元素占位符的一个元素。替换元素的一个经典例子就是img元素，它只是指向一个图像文件，这个文件将插入到文档流中该img元素本身所在的位置，大多数元素也可以替代。

常见置换元素：

  1. 视图元素，如img、object, video ；
  2. 表单元素，如<textarea , input 。
  3. 某些元素只在一些特殊情况下表现为可替换元素，例如 audio和canvas 。
  4. 通过 CSS content 属性插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。

根据W3C文档，有且仅有全体替换元素是具有固体尺寸的。

非置换元素

非置换元素，即表面意思，不是置换元素的元素。