一、overflow的属性
visible 默认值
hidden 溢出隐藏
scroll 显示滚动条
auto 溢出滚动
inherit 继承
其中 hidden 、scroll 、auto属性会为元素创建BFC特性。
二 、 overflow-x 和 overflow-x (IE8+)
- overflow-x 和overflow-y设置了同样的值， 则overflow为该值
- overflow-x 或者overflow-y 如果有一个值为visible，另一个值为 hidden scroll 和 auto其中一个，那么visible的那一边会被设置为auto.
三、滚动条的宽高会影响元素的容纳宽高
- HTML元素的滚动条会影响自身的宽度
image.png
其他元素则会影响他的可容乃宽度 比如说元素的宽度为100px，他能容乃的宽度为:
image.png
100px - 滚动条宽度 （一般为17px）
如果设置overflow: auto`当里面元素大于这个宽度是就会出现滚动条
四、overflow实用场景
- 阻止margin穿透
利用BFC特性，为元素设置overflow: hidden / scroll / auto
- 清除浮动
为元素设置overflow: hidden / auto / scroo清除子元素浮动带来的高度坍塌情况 （原因是使用了BFC特性/ BFC元素的高度会计算包含浮动的子元素）
- 自适应布局
为一个block元素设置overflow值和一个float的元素并排布局，就会形成block元素的自适应，(原因是因为block元素还保持着块级元素的特性，宽的会100%填满父级元素、但是设置为BFC后，又不得不与外界保持完全独立的关系，所以会进可能个填充剩余的宽度，实现了自适应宽度。)
.box {
background: #ccc;
overflow: hidden;
}
.child1 {
width: 100px;
height: 100px;
background: green;
float: left;
margin-right: 10px;
}
.child2 {
background: yellow;
height: 100px;
overflow: hidden;
}
image.png
- 使用overflow: hidden 实现 文本省略
ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
