前言：边界属性margin是盒子与盒子之间的间距，一定要记住这个前提。

BFC

满足下列条件之一就可触发BFC(IE的触发需要再额外增加zoom: 1)

• 根元素，即HTML元素
• overflow的值不为visible
• 设置border
• float的值不为none
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

边界值重叠

两个相邻的块级元素之间的margin边界值会互相重叠。如：第一个div的margin-bottom和第二个div的margin-top区域会重叠，只显示最大值。(其实说实在的，应该没人会这么写，毕竟直接设置一个盒子的的边界值就可以了。但是这个还是需要注意的。)

解决方法： 其中一个div增加子元素，并设置overflow的值不为visible(触发BFC的元素都可以解决,根据样式需求选择合适的方法即可)，然后子元素设置边界值。

    
  
     
      测试
     
    
    
     测试
    

边界值无效, 第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题(

重点)

    
  
     
测试
  
     
测试
  
     
测试
  
     
测试
    

解决方法：通常情况下，我们会选择给li一个边界top或者bottom来分割开每个li之间的间隔，但是你会发现，第一个子元素的margin-top和最后一个子元素的margin-bottom不会产生跟ul之间的间距，会出现越界。其实一样的处理。

    
  
     
测试
  
     
测试
  
     
测试
  
     
测试
    

ps: 在以前蠢蠢的不知道的时候，有时候会通过给ul增加padding-bottom,然后给最后一个li去除margin类似这样，虽然这样可以解决，但是不推荐。 如果li与ul的边界值大于会小于li之间的间距时，可以根据情况重新设置首尾边界的具体值。