BFC

《块格式化上下文》

<!-- BFC 特性及应用 -->

<!-- 1. 同一个 BFC 下外边距会发生折叠,即同一元素下的其他元素 -->

<!-- BFC 可以包含浮动的元素（清除浮动） overflow: hidden触发-->

<!-- 3. BFC 可以阻止元素被浮动元素覆盖 overflow: hidden触发-->

 

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>

<div style="width: 200px; height: 200px;background: #eee;overflow: hidden">我是一个没有设置浮动,

也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

 

<!-- 总结 -->

<!-- 只要元素满足下面任一条件即可触发 BFC 特性： -->

 

<!-- body 根元素 -->

<!-- 浮动元素：float 除 none 以外的值 -->

<!-- 绝对定位元素：position (absolute、fixed) -->

<!-- display 为 inline-block、table-cells、flex -->

<!-- overflow 除了 visible 以外的值 (hidden、auto、scroll) -->

参考文献：

https://blog.youkuaiyun.com/jiaojsun/article/details/76408215