在网页布局的时候我们经常会碰到有关float的使用,但是用了float没有清除会出现下面的诡异情况。接下来我们就说说怎么去清除这些float。

没有清理浮动的现象


这里我没有给最外层的DIV.outer 设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,就出现了一下影响:

(1):背景不能显示 (2):边框不能撑开

代码如下:

<!DOCTYPE html>
<html>

<head>
<title></title>
<style type="text/css">
.outer {border: 1px solid #ccc;background: #fc9;color: #fff;margin: 50px auto;padding: 50px;}
.div1 {width: 80px;height: 80px;background: red;float: left;}
.div2 {width: 80px;height: 80px;background: blue;float: left;}
.div3 {width: 80px;height: 80px;background: sienna;float: left;}
</style>
</head>

<body>
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>

</html>

清理浮动的方法

一、使用带有clear属性的空元素

在浮动元素后使用一个空元素如下

<div class=”clear”></div>

并在CSS中赋予如下属性即可清理浮动。亦可使用来进行清理。

.clear{clear:both;height: 0; line-height: 0; font-size: 0;}

我想说这并不是一个好方法,尽管它兼容所有浏览器并且随用随清。这个方法需要添加大量无语义的html元素。

二、使用CSS的:after伪元素

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。这是我认为目前比较完美的解决方式。

HTML:

<div class="outer clearfix">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

CSS:

.clearfloat:after {
clear: both;
/* 清除浮动 */
content: '\20';
/* 内容添加一个不可见的空格 */
display: block;
width: 0;
height: 0;
}

或者

.clearfix:after {
clear: both;
content: '.';
visibility: hidden;
/* 允许浏览器渲染‘.’,但是不显示出来 */
display: block;
width: 0;
height: 0;
}

需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout(你可以把它写到IE6、7的CSS hacker文件里,这样不会影响W3C标准验证)。

该方法需要给每组浮动元素都添加一个容器,推荐在页面布局时使用。大量使用依旧会对代码量造成一些影响。

三、使用CSS的overflow属性进行怪异处理

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以怪异清理浮动。

HTML:

<div class="outer overflow">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

CSS:

.overflow {
overflow: hidden;
/* 或者 overflow: auto;*/
}

虽然很多地方以“将来浏览器可能不兼容”为由,不建议使用此方法。我倒是觉得目前使用此法的国内外网站众多,浏览器短时间内并不会在此问题上后退处理。此外这个方法无需添加额外的class,在做主题时比较实用。我建议在局部和无法添加class的地方使用该方法清理浮动,但是不要作为主要清理浮动方式。

四、给浮动元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清理内部浮动。同overflow法一样无须添加额外的class,使用方便但是会对下面的文档造成影响。

HTML:

<div class="outer float">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

CSS:

.float {
float: left;
}

建议在容器原本就浮动或者容器使用了绝对定位时使用该方法。不要在主要布局中使用。

五、使用邻接元素清理

什么都不做,给浮动元素后面的元素添加clear属性。要确保的是邻近元素跟两个浮动元素都在同一层容器元素内,如果邻近元素在容器元素后面,建议使用:after伪元素清理。

六、综合运用方案建议

  1. 主要使用:after伪元素方法
  2. 在小模块里使用overflow:hidden;(可能产生隐藏溢出元素问题)
  3. 本身就是浮动元素则可自动清除内部浮动,无需格外处理;
  4. 正文中使用邻接元素清理之前的浮动。

转载请标注原文地址