margin Bug及其bfc解决方案

margin Bug

margin 塌陷

父子嵌套的垂直方向上的margin取最大值

margin 合并

兄弟元素的垂直方向上的margin取两元素的margin值之和

解决方案

触发bfc

什么是bfc？

block format context
块级格式化上下文
每一个元素都有一套属于自己的渲染逻辑，如同细胞中的DNA
bfc的设定能够让特定的盒子/元素有拥有自己的渲染逻辑或者说是不一样的渲染逻辑

如何触发bfc？

1. position：absolute
2. display：inline-block
3. float：left/right
4. overflow：hidden

注意：解决margin合并时用bfc的方法会导致html的结构发生变化，所以不提倡使用这种解决方式，还有简单粗暴的解决方法，就是使用简单的数学思维，在两个兄弟元素的margin合并时计算好需要的总margin大小