margin塌陷的问题

        在使用margin-top的时候，常常会发现父级元素会随着子级元素一起改变高度，这是因为在html中，当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷。

示例：    原本样式

想要的效果

直接写margin-top得到的结果

解决方法：让父级元素触发BFC    Block Formatting Content块级格式化上下文（简称BFC）

触发BFC的方法  1、给父级元素添加float，使其浮动

                            2、使用定位position

                            3、使用display

                            4、使用overflow

                            需要注意的是，这是一个bug，不能完全解决，使用上面的方法会触发一些其他的问题，所以在解决的时候需要根据实际情况任取其一就行了。