这时候两个盒子之间的垂直距离不是30px，而是20px。

**解决方法：**
尽量只给一个盒子添加margin值。

**2.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。**

<style>
.box1 {
width: 150px;
height: 100px;
margin-top: 20px;
/ border: 1px solid #000000; /
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
/ border: 1px solid #000000; /
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
</head>

<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>

这时候两个盒子会发生合并，上外边距为20px。

**解决办法：**
①给父元素定义上边框
②给父元素定义上内边距
③给父元素添加 overflow：hidden；
④添加浮动 
⑤添加绝对定位

**3.如果存在一个空的块级元素，border、padding、inline content、height、min-height都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。**

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

可以理解成中间div宽度为0且上下边距融合，只取margin的最大值。

#### 清除浮动的方式
**1，使用额外标签法：**
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。

.clearfix{
clear: both;
}
<div class="clearfix"></div>

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

**2，使用overflow属性来清除浮动：**
先找到浮动盒子的父元素，再在父元素中添加一个属性，就是清除这个父元素中的子元素浮动对页面的影响。

overflow: hidden;



**对象篇**

![](https://s2.51cto.com/images/20210927/1632717705590533.jpg)

![](https://s2.51cto.com/images/20210927/1632717705473771.jpg)

**模块化编程-自研模块加载器**

![](https://s2.51cto.com/images/20210927/1632717705747381.jpg)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**

![](https://s2.51cto.com/images/20210927/1632717706963438.jpg)