清除浮动
Posted echo-hui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了清除浮动相关的知识，希望对你有一定的参考价值。
经常会说没有清除浮动的话就会导致高度坍塌，啥是高度坍塌呢？
1.什么是高度坍塌？
简单来说就是包含有浮动元素的上一级元素（即父级元素）高度变为0了。下图有浮动元素的父级元素border设置为绿色，但是高度变为了0.
为包含浮动元素的父级元素：
代码：
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伪元素
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;
}
以上是关于清除浮动的主要内容，如果未能解决你的问题，请参考以下文章