# 最佳结界 overflow

清除浮动影响的最适合的属性 overflow ，设置 overflow: hidden，利用 BFC 的结界特性彻底清除浮动对外部或兄弟元素的影响
实例可参考 CodePen (opens new window)

# overflow 剪裁界线 border-box

codepen box3

.box3
  img(src="	https://s.cn.bing.net/th?id=OHR.PurnululuNP_ZH-CN0102753224_1920x1080.jpg&rf=LaDigue_1920x1080.jpg", height=200)

1
2

.box3 {
  width: 200px;
  height: 100px;
  border: 10px solid;
  padding: 20px;
  overflow: hidden;
}

1
2
3
4
5
6
7

# overflow 与锚点定位

codepen box1

本质是改变容器滚动高度（垂直滚动）实现
行为是由内而外的

codepen box2

设置了 overflow: hidden 的元素也是可以滚动的

codepen box4

选项卡(容器高度需固定)

← float position →