经常会说没有清除浮动的话就会导致高度坍塌,啥是高度坍塌呢?
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{
20%;
height: 50%;
border: 1px solid red;
float: left;/设置浮动/
}
.only{
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{ 20%; height: 50%; border: 1px solid red; float: left; } .only{ 30%; height: 60px; background: #000; } .par:after{ content: '.'; /*生成内容作为最后的一个元素,至于content里面是什么内容没有影响*/ display: block;/*使得生成的元素以块级元素显示,占满剩余空间*/ height: 0; /* 避免生成的内容破坏原有的空间的高度*/ visibility: hidden;/*使得生成的内容不可见*/ clear: both; /*闭合浮动*/ } .par{ zoom: 1; }