从我开始写页面的那一刻起,我就发现了用左右浮动这个属性时,经常就会发现父元素不见了,没有想象中那样支撑起来包裹住里面的元素,后来通过网上查找,才知道原来这就是为什么需要清除浮动了。
什么是CSS清除浮动?
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
那么清除浮动的方法有很多,在网上也查看了一下,一开始我学会的方法就是使用带clear属性的空元素,但是后来发现在IE浏览器中还是会有问题,不能很好的解决。
那么,下面我就总结一下,我看到过,也用过的清除浮动的方法吧。
清除浮动方法
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>
,并在CSS中赋予.clear{clear:both;
}属性即可清理浮动。亦可使用<br class="clear" />
或<hr class="clear" />
来进行清理。
列如:
.box {
background-color: gray;
border: solid 1px black;
}
.box img {
float: left;
}
.box p {
float: right;
}
.clear {
clear: both;
}
<div class="box">
<img src="box-icon.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;
或overflow:auto;
可以清除浮动,另外在 IE6 中还需要触发 hasLayout
,例如为父元素设置容器宽高或设置 zoom:1
。
在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
例如:
.box{
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
.box img {
float: left;
}
.box p {
float: right;
}
<div class="box">
<img src="box-icon.jpg" />
<p>some text</p>
</div>
(以前我也是经常这样做的,后来发现在实际项目中,这样有可能会使得隐藏溢出元素问题。)
方法三:使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。 (这也是我一开始经常这样做的方法)
方法四:使用CSS的:after伪元素
结合 :after
伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack
,可以完美兼容当前主流的各大浏览器,这里的 IEhack
指的是触发 hasLayout
。
给浮动元素的容器添加一个clearfix
的class
,然后给这个class
添加一个:after
伪元素实现元素末尾添加一个看不见的块元素(Block element)
清理浮动。
.box{
background-color: gray;
border: solid 1px black;
}
.box img {
float: left;
}
.box p {
float: right;
}
//清除浮动
.clearfix {
/* 触发 hasLayout */
*zoom: 1;
}
.clearfix:after{
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<div class="box clearfix">
<img src="box-icon.jpg" />
<p>some text</p>
</div>
总结
通过上面的例子,我们不难发现清除浮动的方法可以分成两类:
一、是利用
clear
属性,包括在浮动元素末尾添加一个带有clear: both
属性的空div
来闭合元素,其实利用:after
伪元素的方法也是在元素末尾添加一个内容为一个点并带有clear: both
属性的元素实现的。二、是触发浮动元素父元素的
BFC (Block Formatting Contexts
,块级格式化上下文),使到该父元素可以包含浮动元素,关于这一点。
所以,在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;
在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);
如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。