一、什么是高度塌陷
在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的，即子元素多高，父元素就有多高。但是当子元素设置浮动之后，子元素就会完全脱离文档流，父元素还在文档流中，此时父元素的高度就没有子元素撑起（子元素无法撑起父元素的高度），从而导致父元素的高度塌陷。简单来说，就是包含含有浮动的元素的上一级元素的高度变为0了，下面的元素会上去，这样会导致页面布局混乱。
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
width: 300px;
border: 5px solid #f00;
}
.child {
float: left;
width:100px;
height: 100px;
border: 5px solid #00f;
}
二、解决方法
1、父元素结束之前添加一个标签 <div style="clear:both;"></div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div style="clear:both;"></div>
</div>
<div class="bottom"></div>
.parent {
border: 5px solid #f00;
}
.child {
float: left;
width: 100px;
height: 200px;
border: 5px solid #00f;
}
.bottom {
width: 200px;
height: 100px;
background: #0f0;
}
缺点：增加了无意义的标签
2、让父元素本身也浮动 float：left;
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="bottom"></div>
.parent {
float: left;
border: 5px solid #f00;
}
.child {
float: left;
width: 100px;
height: 100px;
border: 5px solid #00f;
}
.bottom {
width: 200px;
height: 100px;
background: #0f0;
}
缺点：虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响
3、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="bottom"></div>
.parent {
height: 100px;
border: 5px solid #f00;
}
.child {
float: left;
width: 100px;
height: 100px;
border: 5px solid #00f;
}
.bottom {
width: 200px;
height: 100px;
background: #0f0;
}
缺点：父元素与子元素的边框会重叠，无法自适应子元素的高度
4、给父元素设置display: inline-block;
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="bottom"></div>
.parent {
display: inline-block;
border: 5px solid #f00;
}
.child {
float: left;
width: 100px;
height: 100px;
border: 5px solid #00f;
}
.bottom {
width: 200px;
height: 100px;
background: #0f0;
}
缺点：会导致父元素的宽度丢失，与相邻元素会产生额外的间距
5、给父元素设置 overflow : hidden;
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="bottom"></div>
.parent {
overflow: hidden;
border: 5px solid #f00;
}
.child {
float: left;
width: 100px;
height: 100px;
border: 5px solid #00f;
}
.bottom {
width: 200px;
height: 100px;
background: #0f0;
}
缺点：要是子元素要margin负值定位或是负的position定位，溢出部分会被裁掉，如二级菜单的影响
6、通过after伪类，after + zoom方法（推荐）
<div class="parent clearAll">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="bottom"></div>
.parent {
border: 5px solid #f00;
}
.child {
float: left;
width: 100px;
height: 100px;
border: 5px solid #00f;
}
.bottom {
width: 200px;
height: 100px;
background: #0f0;
}
.clearAll:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearAll {
zoom : 1;
}
利用伪类来清除浮动，其效果跟创建一个空的div并设置其为 clear：both 是一样的，只不过这里用伪类代替了空的div元素，不会影响任何其他样式，通用性强，覆盖面广。
