解决嵌套块元素塌陷问题

左手的ㄟ右手 2022-10-22 07:52 13阅读 0赞

### 嵌套块元素塌陷问题 ###

*  问题描述
 *  解决方案
 *   *  1. 父框定义边框
     *  2. 给父框定义内边距
     *  3.overflow:hidden
     *  4. display:flow-root

# 问题描述 #

当使用`margin`定义块元素的垂直外边距时，有可能会出现垂直外边距塌陷问题，比如以下情况：

.father { 
    	width: 200px;
    	height: 200px;
    	background-color: yellow;
    }
    .son { 
    	width: 100px;
    	height: 100px;
    	background-color: blue;
    }

效果图  
![原始效果图][20210405170909456.png]  
当我们给父框设定上边距`margin-top: 20px;`再想要子框相对父框向下移动20像素时就会出现塌陷效果

.father { 
    	width: 200px;
    	height: 200px;
    	background-color: yellow;
    	margin-top: 20px;
    }

.son { 
    	width: 100px;
    	height: 100px;
    	background-color: blue;
    	margin-top: 30px;
    }

![加入上边距之后的效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]  
可以很明显的看到子框并没有相对父框进行移动，反而子框把父框往下带了30px。

# 解决方案 #

## 1. 父框定义边框 ##

给父框定义一个边框可以较好的解决这个问题，出于视觉需要可以将边框颜色设为`transparent`

.father { 
    	border: 1px solid transparent;
    }

![加了边框后的效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70 1]

## 2. 给父框定义内边距 ##

.father { 
    	padding-top: 30px;
    }

![给父框加内边距][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70 2]  
此时子框则不需要设定`margin-top`值了，父框已经设定了内边距，上图子框与父框的相对位置是子框的`margin-top: 30px`\+父框的`padding-top: 30px`的效果

## 3.overflow:hidden ##

给父框添加`overflow: hidden;`触发BFC（Block Formatting Contexts）即块级格式化上下文，具备BFC特性的元素可以看做是一个独立的容器，容器里的元素不会在布局上影响到外面的元素

.father { 
    	overflow: hidden;
    }

![触发bfc机制后的效果图][bfc]

## 4. display:flow-root ##

在使用`display:flow-root;`声明后，所声明的元素会变为块级元素，同时为这个元素建立一个新的块级格式上下文（BFC），同时可以清除浮动。

[20210405170909456.png]: /images/20221022/ae32b03eb4cd474384d122f3c9218dad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]: /images/20221022/6baa201aa8f84934aaa60b50a41340e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70 1]: /images/20221022/f1ec5d153add4c5dbd21c76167ee85c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70 2]: /images/20221022/9fd5cb4cf6ca4132ab8c110670147847.png
[bfc]: /images/20221022/75bcba5e1f814d3ca574b7ebae7d5558.png