margin塌陷

曾经终败给现在 2022-08-31 04:53 182阅读 0赞

### 文章目录 ###

*   *   *  1. 什么是margin塌陷
         *  2. 问题场景
         *  3. 怎么破

### 1. 什么是margin塌陷 ###

有的人会解释为垂直方向上两个兄弟元素的margin非加和，而是取较大值，这其实是【margin合并】；  
有的人会解释为子元素浮动造成父元素高度为0，这其实是【高度塌陷】；  
我不知道怎么定义【margin塌陷】，只能说本文讨论的是：**设置margin后不符合常规预期的一个场景**。

### 2. 问题场景 ###

两个很普通的元素，父子结构，我们给子元素设置了`margin-top: 25px;`。  
预期效果：我以为是子元素会在父元素内下移25px；  
实际效果：子元素带着父元素一起下移了25px，如下图：  
![在这里插入图片描述][7fb79cc5989a42a888e5bc3202cd9fe3.png]

> 注：水平方向不存在该问题。

### 3. 怎么破 ###

*  不要在子元素上使用margin处理父子边距，而是在父元素上使用padding去处理（推荐）；
 *  给父元素设置一个边框即可；
    
        .parent{ 
        	border: 1px solid #FFF;
        }
 *  开启父元素的BFC(Block Formatting Content)属性即可；
    
        .parent{ 
        	/*任一均可*/
        	float: left;
        	position: absolute;
        	display: inline-block;
        	overflow: hidden;
        }
    
    开启BFC属性的方法：
    
     *  float: left/right;
     *  position: absolute/fixed;
     *  display: inline-blocks/table-cells/table-captions;
     *  overflow: hidden/auto/scroll;

[7fb79cc5989a42a888e5bc3202cd9fe3.png]: /images/20220829/f79ecc10f2db411aa1ec641cef77aa8d.png