清除浮动

Posted echo-hui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动相关的知识,希望对你有一定的参考价值。

经常会说没有清除浮动的话就会导致高度坍塌,啥是高度坍塌呢?
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;
}

 




























以上是关于清除浮动的主要内容,如果未能解决你的问题,请参考以下文章

CSS清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

清除浮动

清除浮动的几种方法

css的浮动以及如何清除浮动

为何要清除浮动?如何清除?

clear清除浮动最佳实践和BFC清除浮动