overflow 的原理

要讲清楚这个解决方案的原理，首先需要了解块格式化上下文，A block formatting contextis a part of a visual CSS rendering of a Web page. It is the region in which the layout of blockboxes occurs and in which floats interact with each other.翻译过来就是块格式化上下文是CSS 可视化渲染的一部分，它是一块区域，规定了内部块盒 的渲染方式，以及浮动相互之间的影响关系当元素设置了 overflow 样式且值部位 visible 时，该元素就构建了一个BFC，BFC 在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术 BFC 区域内只有一个浮动元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的。