为什么是03，因为我是从今天才意识到输出也是学习过程中很重要的一环，所以从今天开始，我会把每天学到的新知识记录下来，温故而知新。重申下，每篇文章都是我当天学习的记录，因本人是小白，水平有限，难免出现纰漏，后续会及时改正。欢迎各位指出错误！！！1,首先来看看overflow的5个基 ...
为什么是03，因为我是从今天才意识到输出也是学习过程中很重要的一环，所以从今天开始，我会把每天学到的新知识记录下来，温故而知新。
重申下，每篇文章都是我当天学习的记录，因本人是小白，水平有限，难免出现纰漏，后续会及时改正。欢迎各位指出错误！！！
1,首先来看看overflow的5个基本属性：
- visible默认值。内容不会被修剪，会呈现在元素框之外。
- hidden内容会被修剪，并且其余内容是不可见的。
- scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit规定应该从父元素继承 overflow 属性的值。
1-1 overflow-x和overf-y同时使用的问题
如果overflow-x和overflow-y二者的值相同，等同于overflow； 如果二者值不同，其中一个被赋予visible；另一个被赋予auto，hidden，scroll，其中visible会被重置为auto。
1-2 overflow：visible的妙用
IE7浏览器下，文字越多，按钮两侧padding留白就越大！
而同样内容在IE8下：
给所有按钮添加CSS样式 overflow:visible 后的IE7浏览器：
2，我们来看看overflow与滚动条的关系：
2-1，滚动条出现的条件与滚动条的标签来源。
1，overflow:auto 或者 overflow:scroll. 2,草窝藏不住凤凰，潜水困不住蛟龙。
2，无论什么浏览器，默认滚动条均来自<html> 标签而不是<body>标签。
padding-bottom缺失
在非chrome浏览器中。如果滚动区域写了上下padding,那么padding-bottom会缺失，这会导致不一样的scrollheight(元素内容高度)。
滚动条导致布局问题
滚动条是会占据宽度的，所以最好是把宽度预留足够。
水平居中跳动的问题
.container{width:1150px;margin:0 auto} 容器container会在页面中左右跳动。
3，overflow与BFC的关系：
3-1，overflow的4个属性中除了visible 其他3个（auto scroll hidden）都会触发BFC。
3-2，overflow实现BFC的应用： 1，清除浮动影响。2，避免margin穿透和重叠的问题。3，亮蓝自适应布局。
3-2-1，子元素浮动，会导致父元素高度塌陷。此时给父元素添加上文中提到的3个overflow属性，会触发BFC，使得父元素高度不再受浮动的子元素的影响。
3-2-3，利用float和overflow的两栏自适应布局：
<style> * { margin: 0; padding: 0; } .box { margin-top: 200px; height: 50px; background-color: pink; } .left { width: 50px; height: 50px; background-color: deepskyblue; /*左边的盒子左浮动*/ float: left; } .right { /*box-sizing: border-box;*/ /*padding-left: 50px;*/ height: 50px; background-color: orangered; /*右边的盒子设置overflow:hidden*/ overflow: hidden; } </style><div class="box"> <div class="left"> 左边固定宽度 </div> <div class="right"> 右边宽度自适应 </div></div>
教程中提到的两栏自适应布局的方案：
4，overflow与position:absolute的关系：
4-1-1，父元素已经有overflow：auto属性，再给图中的img添加position:absolute属性，会导致滚动条失效，图片不随滚动条移动。
4-1-2，父元素拥有overflow:hidden属性，再给img添加position:absolute属性，会导致图片溢出。
4-1-3，导致overflow:hidden和滚动条失效的原因：
4-1-4，避免失效的方法：
4，overflow配合resize拉伸：
4，overflow与锚点技术：
此方法只适用于单页应用。
本文是我今天学完张大大对overflow讲解的一点记录，如果您也对css的深度讲解感兴趣，请一定去张大大博客看看。最后本文写的比较仓促，后续会有补充说明。
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：大神张鑫旭慕课网CSS系列教程学习笔记03：overflow
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
