float和overflow

我们经常看到下面代码：

.list
	overflow:hidden
	float:left

原因是：
由于浮动元素脱离了文档流，不占据父元素空间，所以父元素没有被撑开，因此可能造成元素塌陷，所以利用overflow：hidden的BFC属性清除浮动，撑开元素。

详细了解bfc

参考文章：
https://coding.imooc.com/learn/questiondetail/162211.html
https://www.imooc.com/article/12448
https://www.cnblogs.com/liuyuweb/p/11284826.html

这属于css的一个高级知识点BFC的内容，清除浮动也是建立在bfc的基础上，bfc核心是 触发bfc的元素的内部元素不会影响外部元素，外部元素也不会影响内部元素，而除了visible外的任何overflow属性都会触发当前元素构成一个bfc元素，导致内部会出现以下但不限于以下的变化：1）内部元素的块级元素的margin-left和bfc元素的border-left对齐（一般情况），2）内部有float属性的元素不会跳脱出bfc元素的宽高，即使脱离了文档流；老师代码中使用overflow便是基于这个。在未添加overflow：hidden之前，你会发现，带有.button-wrapper这个属性的元素引发了带有.button-list的元素的高度塌缩，即带有.button-wrapper的元素的高度比带有.button-wrapper的元素的高度小（简单理解），这里因为.button-wrapper下只有一个元素，因此高度直接变成了0，那么我们就给带有.button-list的元素设置overflow：hidden，那么这个元素就变成了一个bfc元素，导致内部的浮动元素无法跳脱它的宽高。bfc是一个不好理解的内容，但是如果理解了，许多诡异的布局都会理解。