**1、margin塌陷**

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

Document//20pxmargin-top

效果：

**解決方法：**

(1)給父級盒子加上邊框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；給父級加上絕對定位，讓子級相對父級動。

Document

效果：

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

Document

效果：

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

```

Document

```

效果：

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

```

Document

```

效果：

**2、margin合并**

問題:

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

```

Document

1

2

```

效果：

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

```

Document

1

2

33

```

效果：

解決垂直方向的margin合并問題也是觸動盒子的BFC。

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

```

Document

1

2

33```

效果：

**總結(jié)：**

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

**順帶說一下清除浮動的兩種兩種方法：**

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

下面我就簡單舉例了：

css中：

.clrar{clear:both;}

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

.warpper::after{

content:"";

clrar:both;

display:block;

}

總結(jié)

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

總結(jié)

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

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