css中BFC外边距塌陷解决办法

什么是BFC

块级格式化上下文,独立的渲染区域,与外部毫不相干,上下两个元素都设置了外边距,结果会出现重叠的部分合并



  
    
    
    Document
    
  
  
    

出现的现象

两个边距合并,只有最大的那个边距了,而不是两个边距相加的和

css中BFC外边距塌陷解决办法_第1张图片

解决办法

1、float不为none(下面的盒子设置)

2、position: absolute/fixed(下面的盒子设置)

3、display: inline-block/flex(下面的盒子设置)

4、overflow不为visible(下面的盒子设置)

css中BFC外边距塌陷解决办法_第2张图片

 

你可能感兴趣的:(HTML前端,css,前端,html)