在文档流中，父元素的高度是被子元素给撑开的，如图，一个父元素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是没有用的。如图即可：
网友评论