解决高度塌陷的问题和父子元素外边距重叠问题

在文档流中，父元素的高度是被子元素给撑开的，如图，一个父元素box1里有个子元素box2，当box2没有设置宽高时，html中box1高度是没有的。

首先上答案：

第一种解决方案：

给父元素设置一个属性：overflow:hidden/overflow:auto.

第二种解决方案：

给父元素用css样式添加一个伪类，设置一个空内容然后清除浮动。

例：box1有个子元素box2，当box2没有高度时，box1高度就只有2个border的高度，没有被子元素撑开。

当子元素box2有高度时，box1的高度会被撑开。

但是当给box2设置一个float脱离文档流之后，子元素便无法撑开父元素的高度，造成塌陷。

我们可以给父元素一个高度将高度撑开，但是这样父元素高度就无法自适应子元素高度了。

如何解决高度塌陷的问题：

根据W3C的标准，页面中每一个元素都有BFC的属性，属性默认情况下是关闭的，如果开启BFC，元素将具有如下属性：

1.父元素的垂直外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素所覆盖

3.开启BFC的元素可以包含浮动的子元素。

如何开启BFC：

1.设置元素浮动

2.设置元素绝对定位

3.设置元素inline-block

4.将元素设置一个overflow非visible的值

给父元素也设置浮动后的效果：

父元素的高度被撑开，不过宽度也消失了，变得和子元素一样宽，并且box1的兄弟元素box3也会随之顶上来

给父元素设置position:absolute后，得到的效果和设置float效果是一样的：父元素高度被撑开，宽度消失，下面的兄弟元素box3顶上来。

给父元素设置display:inline-block后，效果如图：

父元素高度被撑开，宽度消失，兄弟元素box3未顶上来。

最佳解决方案：

给父元素设置一个overflow非visible的值，如设置overflow:auto/overflow:hidden均可。

父元素高度被撑开，宽度也正常，兄弟元素也没有顶上来。

具体示例如下：

还有一个解决方案，是我们可以给box2添加一个兄弟元素，让这个兄弟元素将父元素撑开

一开始box1有个子元素box2，还有个兄弟元素box3，box2因为有浮动，所以出现了塌陷问题，如图

现在给box2添加一个兄弟元素box4，即给box1添加一个无内容的子元素，给这个子元素设置清除浮动，父元素高度也会被撑开。

但是这种方式有一个缺陷，会增加html中的结构，给内容增加了一个box4，我们可以改进这种方法，用css的：after伪类方法给父元素box1增加一个子元素伪类，给这个伪类设置清除浮动。

如图：设置一个box1:after伪类，也可清除浮动，撑开父元素高度

第二个问题：解决父子元素外边距重叠的问题：

有box1和box2这对父子元素，当我想让子元素box2距离父元素box1有个100px的高度时，发现box1和box2一起都向下移动了100px，并没有实现让box2向下移动100px，距离box1顶部100px的目的。

如何解决这个问题：

当我们给box1添加一个子元素table放在box2的前面时，就可以达到让box2距离box1 100px的目的。

但是这样会改变文档的结构，我们同样可以以css伪类的方式解决这个问题，只不过设置伪类时，要设置成display：table，设置成display：block是没有用的。如图即可：