CSS清除浮动方法总结

当前位置 : 首页 > 网页制作 > CSS > CSS清除浮动方法总结

CSS清除浮动方法总结

来源: 作者: 时间:2015-10-31 10:12
在阿里云首页看到很多div都有加上:before和:after的属性.但是大都只是做了类似的如下处理,请问这样的意义是什么呢?研究了一番,原来是清除浮动用的,下面来总结下清除浮动的几种方法
在阿里云首页看到很多div都有加上:before和:after的属性.但是大都只是做了类似的如下处理,请问这样的意义是什么呢?研究了一番,原来是清除浮动用的,下面来总结下清除浮动的几种方法吧

清除浮动的原因

假设一个 div 内部有个浮动的 div,当内部 div 的高度要比外层的父级 div 高度大时,将会导致父级 div 高度无法随着内部 div 的高度自适应,这是由于浮动元素已经脱离了正常文档流,因此无法对父级元素产生影响。举例如下:


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

请输入图片描述

此时,我们就需要手动来清除浮动。

加入空 div

这是我之前的做法,即在结尾处添加一个空的 div,并设置 clear: both 属性。


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
#clear {
clear: both;
}
</style>
<div id="a">A
<div id="b">B</div>
<div id="clear"></div>
</div>

请输入图片描述

这个方法看似简单,但是如果清除浮动的地方较多,会产生很多无意义的 div,对于整个 HTML 结构无疑是有弊端的。

设定父级 div 高度

这个方法有点 hard code,由于父级 div 无法高度自适应,因此我们可以直接给父级 div 设置一个固定的高度值,如上例,考虑到 border 的值,设定父级 div 高度为 52px。


复制代码
代码如下:

<style>
#a {
width: 100px;
height: 52px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 请输入图片描述

这个方法很快速但也脆弱,一旦内部浮动元素高度发生变化就无效了,所以只能应用于高度固定的场景。

设定父级 div 属性 overflow

直接给父级 div 添加 overflow: hidden 或 overflow: auto 属性,这里以 overflow: hidden 为例。


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 请输入图片描述

这个看上去又简单又实用,但是你不能对父级 div 设置高度,一旦父级 div 设置了固定高度,那么浮动元素超出的部分也会被隐藏。


复制代码
代码如下:

<style>
#a {
width: 100px;
height: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

请输入图片描述

当使用 overflow: auto 属性同时设定固定高度时效果为:

请输入图片描述

设置父级 div 伪类 before && after

这个方法即问题中介绍的新方法,对父级 div 设置伪类 before 和 after 的值。


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 请输入图片描述

这个方法应该是最佳方案,即不会产生无意义的空 div,同时当父级元素高度固定时并不会影响内部的浮动元素高度。但是唯一一点就是伪类的兼容性问题。对于低版本的 IE 浏览器我们可以使用:


复制代码
代码如下:

#a {
zoom:1
}

在阅读了 @ShingChi 兄推荐的这篇博文 - 后,我们还可以进一步地简化代码如下:


复制代码
代码如下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: table;
clear: both;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

Tag:
网友评论

<