CSS-margin塌陷问题

1、什么是margin 塌陷

1、场景

互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

2、结果

导致父元素一起往下移动

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

2、如何解决

1、BFC

什么是BFC和作用

Block Formatting Context，中文叫块级格式上下文。

CSS将HTML的每一个元素都当成一个盒子，而且它进一步的认为每一个盒子里面都有一套正常的语法规则或者叫渲染规则，它能根据这个规则将写的HTML元素绘制出来，但是我们可以通过一些特定的手段触发BFC，让其所符合的语法规则和原来的语法规则有点不一样。

如何触发BFC如何触发BFC

触发BFC方法：

1. float属性为left/right
2. overflow为hidden/scroll/auto
3. position为absolute/fixed
4. display为inline-block/table-cell/table-caption