CSS中的塌陷问题总结

一、margin塌陷

首先我们知道，两个div，上方的div设置的margin-bottom和下方div设置的margin-top 不会叠加，会取两个值当中最大的那个。

而嵌套在一个父元素div中的 子div 在设置了margin-top后，发现并没有和父元素的顶部拉开距离。css代码：

效果：

可以发现子div连带父div 在上方空出了10px的间隙；（若父div也设置了margin-top，则这个个距离等于父div和子div中margin-top的大者）

解决方法：1：给父元素设置overflow：hidden；

2：给父元素设置边框

3：给父元素设置padding值，不过此时子div距离上边缘的距离为父元素的padding-top与子元素的margin-top之和；

二、float塌陷

两个竖直放置的div 在上方的div设置float后，下方的div会和上方div重叠。这是因为float会使元素脱离正常的文档流。

嵌套的div中，父元素未设置height时 若给子元素设置float，此时父元素塌陷 ：

解决方案：

1：给父元素设置高度。

2：给父元素设置浮动。

3：给父元素设置overflow：hidden。

4：在浮动元素后再写一个div 设置clear：both

5：给元素添加一个伪类

.div1:after {

content:""; /*定义了元素之后的内容 */

clear:both;/*清除浮动*/

display:block;/*确保该元素是一个块级元素*/

}