**1、margin塌陷**

問(wèn)題：垂直方向的父子關(guān)系的盒子使用不當(dāng)會(huì)產(chǎn)生margin塌陷。給子級(jí)設(shè)置margin-top時(shí)，他不會(huì)相對(duì)父級(jí)一起動(dòng)，只有他的margin超過(guò)父級(jí)的margin時(shí)，才會(huì)生效，但會(huì)帶著父級(jí)一起動(dòng)(作者總結(jié)，官方定義自己查看)。如：

Document//20pxmargin-top

效果：

**解決方法：**

(1)給父級(jí)盒子加上邊框border:1px silod black;(改變結(jié)構(gòu)了，不推薦使用)

Document

效果：

(2)觸發(fā)盒子的BFC模型(不懂就去百度吧)

如何觸發(fā)盒子的BFC呢？

1.Position：absolute； 2.display:inline-block; 3.float:left/right; 4.overflow:hiddle; 1.Position：absolute；給父級(jí)加上絕對(duì)定位，讓子級(jí)相對(duì)父級(jí)動(dòng)。

Document

效果：

2.display:inline-block;讓父級(jí)同時(shí)具有行級(jí)屬性和塊級(jí)屬性。

Document

效果：

3.float:left/right;讓父級(jí)產(chǎn)生浮動(dòng)流

```

Document

```

效果：

4.overflow:hiddle;溢出部分隱藏

```

Document

```

效果：

**2、margin合并**

問(wèn)題:

margin-left和margin-right區(qū)域不能共用。只會(huì)疊加。

```

Document

1

2

```

效果：

兩個(gè)兄弟結(jié)構(gòu)垂直方向的margin共用。

```

Document

1

2

33

```

效果：

解決垂直方向的margin合并問(wèn)題也是觸動(dòng)盒子的BFC。

解決方法如下：(嵌套盒子：然后：overflower:hidden;)

```

Document

1

2

33```

效果：

**總結(jié)：**

在實(shí)際開(kāi)發(fā)時(shí)不解決這個(gè)問(wèn)題，比如說(shuō)要解決垂直方面200px，為什么不直接top200px呢，不用top100px,然后bottom100px。

**順帶說(shuō)一下清除浮動(dòng)的兩種兩種方法：**

(1)在有浮動(dòng)的元素的后面加入一個(gè)標(biāo)簽。

下面我就簡(jiǎn)單舉例了：

css中：

.clrar{clear:both;}

(2)使用偽類元素，找到需要清除的標(biāo)簽，直接使用三件套：

.warpper::after{

content:"";

clrar:both;

display:block;

}

總結(jié)

以上所述是小編給大家介紹的解決margin塌陷與margin合并(margin)清除浮動(dòng)問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

總結(jié)

以上是生活随笔為你收集整理的解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。