深入理解之overflow

一、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;
}