经常会说没有清除浮动的话就会导致高度坍塌，啥是高度坍塌呢？
1.什么是高度坍塌？
简单来说就是包含有浮动元素的上一级元素（即父级元素）高度变为0了。下图有浮动元素的父级元素border设置为绿色，但是高度变为了0.
高度坍塌
为包含浮动元素的父级元素：
未设置浮动.png
代码：
HTML:
<div class="par">
<div class="sub">第一个</div>
<div class="sub">第二个</div>
<div class="sub">第三个</div>
</div>
<div class="only"></div>
css:
.par{
border: 1px solid #0bb20c;
}
.sub{
width: 20%;
height: 50%;
border: 1px solid red;
float: left;/设置浮动/
}
.only{
width: 30%;
height: 60px;
background: #000;
}
二.解决高度坍塌
1.父级div定义height,手动给父级div定义height，就解决了父级div无法自动获取到高度的问题。但是！只适合高度固定的布局，要给出精确的高度。
2.在父元素结束之前，添加一个标签<div style="clear: both;"></div>。但是这样就使得css添加了没有意义的空标签，不利解读
3.给父级元素设置overflow::auto 或者overflow:hidden。但是auto如果超出范围就会自动生成一个滚动条，hidden会导致超出部分直接隐藏。
4.使用CSS的after伪元素
设置父级元素的after，以及zoom
tip：zoom是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性，但是在webkit内核浏览器中zoom这个属性也是可以被支持的。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决高度坍塌</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="par">
<div class="sub">第一个</div>
<div class="sub">第二个</div>
<div class="sub">第三个</div>
</div>
<div class="only"></div>
</body>
</html>
css：
.par{
border: 1px solid #0bb20c;
/第二种方法，给父级元素设置overflow:auto 或者overflow:hidden/
/overflow: hidden;/
}
.sub{
width: 20%;
height: 50%;
border: 1px solid red;
float: left;
}
.only{
width: 30%;
height: 60px;
background: #000;
}
.par:after{
content: '.'; /生成内容作为最后的一个元素，至于content里面是什么内容没有影响/
display: block;/使得生成的元素以块级元素显示，占满剩余空间/
height: 0; /* 避免生成的内容破坏原有的空间的高度/
visibility: hidden;/使得生成的内容不可见/
clear: both; /闭合浮动*/
}
.par{
zoom: 1;
}
网友评论