兼容各大主流浏览器的清除浮动方法

zxh5566  2016-07-22 06:16   Hits: 

在针对偏向标准解析的浏览器中,可以通过伪类:after解决清除浮动产生的问题,并且在清除浮动的同时需要将伪类层中的内容清空,并将高度和行高等元素设置为0,避免因为引用了:after伪类而生成的伪类层出现其他内容,需要清除浮动的对象是类名为float_box的div标签元素,因此我们只有激活该标签元素伪类层,并添加clear属性将与伪类层相邻的浮动效果清除。float_box:after中的css样式代码的主要作用是解决偏向标准的浏览器中由浮动产生的页面错误问题,考虑到ie浏览器不支持伪类层效果,但却可以使用zoom属性清除浮动,因此还需要加上zoom属性清除ie浏览器中的浮动。,代码如下:
<style type="text/css">
.float_left {
 float:left; /* 将元素左浮动 */
 width:200px;
 height:100px; /* 设置该元素的宽度和高度属性 */
 border:2px solid #FF0000;
}
.float_right {
 float:right; /* 将元素右浮动 */
 width:200px;
 height:100px; /* 设置该元素的宽度和高度属性 */
 border:2px solid #0000FF;
}
.float_box {
 background-color:#AAAAAA;
 zoom:1; /* 针对IE浏览器产生haslayout效果清除浮动 */
} /* 包含浮动元素的容器 */
.no_float {
 color:#FFFFFF;
 background-color:#000000;
} /* 因浮动元素而印象到的内容 */
.float_box:after {
 clear:both; /* 清除伪类层以上的浮动 */
 display:block;
 visibility:hidden; /* 设置伪类层内容为块元素且可见 */
 height:0;
 line-height:0; /* 设置伪类层中的高度和行高为0 */
 content:""; /* 将伪类层中的内容清空 */
} /* 利用:after伪类层清除浮动 */
</style>

xhtml代码如下:
<div class="float_box">
 <div class="float_left">左浮动元素</div>
 <div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试因为浮动导致该容器所处的位置</div>

上一篇:图文列表信息的制作方法
下一篇:css滤镜的是与非