**1、margin塌陷**
問題：垂直方向的父子關系的盒子使用不當會產(chǎn)生margin塌陷。給子級設置margin-top時，他不會相對父級一起動，只有他的margin超過父級的margin時，才會生效，但會帶著父級一起動（作者總結，官方定義自己查看）。如：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><div>//20pxmargin-top</div></div></body></html>
效果：
**解決方法：**
（1）給父級盒子加上邊框border:1px silod black;（改變結構了，不推薦使用）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><div></div></div></body></html>
效果：
（2）觸發(fā)盒子的BFC模型（不懂就去百度吧）
如何觸發(fā)盒子的BFC呢？
1.Position：absolute； 2.display:inline-block; 3.float:left/right; 4.overflow:hiddle; 1.Position：absolute；給父級加上絕對定位，讓子級相對父級動。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><div></div></div></body></html>
效果：
2.display:inline-block;讓父級同時具有行級屬性和塊級屬性。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><div></div></div></body></html>
效果：
3.float:left/right;讓父級產(chǎn)生浮動流
```<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><div></div></div></body></html>```
效果：
4.overflow:hiddle;溢出部分隱藏
```<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><div></div></div></body></html>```
效果：
**2、margin合并**
問題:
margin-left和margin-right區(qū)域不能共用。只會疊加。
```<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><span>1</span><span>2</span></body></html>```
效果：
兩個兄弟結構垂直方向的margin共用。
```<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><span>1</span><span>2</span><div>3</div><div>3</div></body></html>```
效果：
解決垂直方向的margin合并問題也是觸動盒子的BFC。
解決方法如下：（嵌套盒子：然后：overflower:hidden;）
```<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><span>1</span><span>2</span><div><div>3</div></div><div>3</div></body></html>```
效果：
**總結：**
在實際開發(fā)時不解決這個問題，比如說要解決垂直方面200px，為什么不直接top200px呢，不用top100px,然后bottom100px。
**順帶說一下清除浮動的兩種兩種方法：**
（1）在有浮動的元素的后面加入一個標簽。
下面我就簡單舉例了：
<div class = "clear"></div>
css中：
.clrar{clear:both;}
(2)使用偽類元素，找到需要清除的標簽，直接使用三件套：
.warpper::after{content:"";clrar:both;display:block;}總結
以上所述是小編給大家介紹的解決margin塌陷與margin合并（margin）清除浮動問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
