清除浮动

最新推荐文章于 2024-04-29 16:58:49 发布

aa45145

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/grapefruitskin/p/5359524.html

版权

在html布局中会用到浮动，但是使用不当会使页面达不到想要的效果。先来看一个由浮动造成bug的例子：

html代码：

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

css代码：

<style type="text/css">
.float_left {
    float:left; /* 将元素左浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #FF0000;
    color:white;
}
.float_right {
    float:right; /* 将元素右浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #0000FF;
    color:white;
}
.float_box {
    background-color:#AAAAAA;
} /* 包含浮动元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮动元素而影响到的内容 */
</style>

得到的效果：

从效果图可以看到不仅 class为no_float的div飘到了页面最上面，就连class为float_box的div的背景颜色也无法正常显示了。为了消除浮动带来的问题，需要利用‘清除浮动’技术来解决。

1.利用br标签中的clear属性清除浮动

<body>
<div class="float_box">
     <div class="float_left">左浮动元素</div>
     <div class="float_right">右浮动元素</div>
     <br clear="all">
</div>
<div class="no_float">测试因为浮动导致该容器所处的位置</div>
</body>

注：br的位置，是在包含有浮动元素的div内部。此外在FF浏览器看到类名为float_box的div标签已经有了背景，但是IE浏览器（IE7及以下）还不能正常显示背景色,这是IE浏览器中的haslayout问题造成的。为了纠正IE浏览器的兼容问题，需要对css中的.float_box进行修改

<style>
.float_box {
    background-color:#AAAAAA;
    zoom:1; /* 修正IE浏览器中haslayout的问题 */
} /* 包含浮动元素的容器 */
</style>

此时得到的结果是：

2.利用css样式中的clear属性清除浮动（存在兼容问题）

可以利用添加行间样式，来清除浮动，这也我常用的方法。代码如下：

<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 { clear:both;/* 清除相邻的浮动效果 */
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮动元素而印象到的内容 */
</style>

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

这种写法减少了一个无意义的空标签，并且达到了清除浮动的效果：

FF浏览器，chrome浏览器，IE8及以上浏览器：

IE7及以下元素：

注：在IE7及其以下版本的浏览器中通过zoom结合clear属性将浮动元素属性清除，并且让浮动元素的父级自适应高度，但此时对于FF浏览器而言只能清除浮动，无法自适应高度。zoom属性是IE浏览器私有的属性。不过有时我们不会给浮动元素的父级添加背景，此时可以使用这种方法。

3.利用css样式中的overflow属性清除浮动

代码如下：

<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 {overflow:hidden; /* 清除元素自身的因为浮动导致的浏览器解析问题 */
    background-color:#AAAAAA;zoom:1;
} /* 包含浮动元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮动元素而印象到的内容 */
</style>

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

注:这种方式比较简单，不过同样存在一些问题，例如当类名为float_box的div中有内容超出div后会被隐藏掉。

4.利用伪类：after后续控制的高度为零的伪类层清除浮动

虽然IE7及其以下浏览器不支持伪类层的效果，但是我们还是可以利用在偏向标准的浏览器中支持伪类层的效果解决浮动产生的问题，清除浮动的条件之一是必须在浮动元素之后，因此我们使用:after伪类就可以了。而且在清除浮动的同时要将伪类层中的内容清空，并将高度和行高等元素设置为0，避免因为引用了：after伪类而生成的伪类层出现其他的内容。+

<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;
} /* 因浮动元素而印象到的内容 */
.clearFix:after {
    clear:both; /* 清除伪类层以上的浮动 */
    display:block;
    visibility:hidden; /* 设置伪类层内容为块元素且可见 */
    height:0;
    line-height:0; /* 设置伪类层中的高度和行高为0 */
    content:""; /* 将伪类层中的内容清空 */
} /* 利用:after伪类层清除浮动 */
.clearFix{
    zoom: 1;/*针对IE浏览器产生haslayout效果清除浮动*/
}
</style>

<body>
<div class="float_box clearFix">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
</div>
<div class="no_float ">测试因为浮动导致该容器所处的位置</div>
</body>

注：利用伪类清除浮动的时候我们给浮动元素的父元素又添加了一个类名，利用这个新类名的伪类来清除浮动。这样做的目的是因为，如果突然有需求变更，原来的浮动元素不再要求浮动，那么批量修改的话，只需要去掉clearFix这个类名就可以了。

转载于:https://www.cnblogs.com/grapefruitskin/p/5359524.html

aa45145

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动

在html布局中会用到浮动，但是使用不当会使页面达不到想要的效果。先来看一个由浮动造成bug的例子：html代码：<body><div class="float_box"> <div class="float_left">左浮动元素</div> <div class="float_right"&...
复制链接

扫一扫