清除浮动（详解）

经常会说没有清除浮动的话就会导致高度坍塌，啥是高度坍塌呢？
1.什么是高度坍塌？
简单来说就是包含有浮动元素的上一级元素（即父级元素）高度变为0了。下图有浮动元素的父级元素border设置为绿色，但是高度变为了0.

高度坍塌

为包含浮动元素的父级元素：

未设置浮动.png

代码：
HTML:

第一个

第二个

第三个

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.在父元素结束之前，添加一个标签

。但是这样就使得css添加了没有意义的空标签，不利解读
3.给父级元素设置overflow::auto 或者overflow:hidden。但是auto如果超出范围就会自动生成一个滚动条，hidden会导致超出部分直接隐藏。
4.使用CSS的after伪元素

设置父级元素的after，以及zoom

tip：zoom是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性，但是在webkit内核浏览器中zoom这个属性也是可以被支持的。

完整代码：

第一个

第二个

第三个

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;
}