CSS:清除浮动的解决方法

作者：我就是个世界发表于：2009-03-15

在用DIV+CSS的时候，经常会用去浮动（float）层来达到DIV模排的效果，如果此时你使用了浮动层排版后，并未清除浮动，又接着写下一个DIV，那么此时你会出现问题：在有些浏览器中由于高度不能自适应而导致你的DIV层重叠。

用Firefox看我下面的这个例子，浮动未清除前父DIV的高度是不能自适应P的高度的.

[html]

aaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa
aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa
aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa
aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaa

[/html][separator]

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<style>
div {
  width:500px;
  border:1px solid red
  }
p {
  float:left;
  width:400px;
  }
</style>
<div>
  <p>aaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa
aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa
aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa
aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaaaaa</p>
<br id="cc" />
</div>
<button onclick="document.getElementById('cc').style.clear='both'">清除浮动</button>[/code]

[color=#008000]为了兼容不能自适应高度的浏览器，或者为了排版的需要，我们需要清除浮动。清除浮动的方法有两种：[/color]

[b]第一种方法：[/b] [color=#FF0000]用空标签清除,也就是使用clear的属性来清除浮动[/color]

[color=#008000]clear 有以下四种属性: none | left |right | both
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象
该属性的值指出了不允许有浮动对象的边。
对应的脚本特性为clear [/color]

[code].clear {clear: both;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <p class="clear"></p>
</div> [/code]

或者直接给你需要清除的那个层定义一个 clear

[code]
<html>
<head>
  <style type="text/css">
    #layout{width:650px;height:auto;background:#494;padding:10px;}
    .div{width:100px;float:left;height:100px;border:solid 1px white;background:#eee;margin:3px;}
    .clear{clear:left;}
  </style>
</head>
<body  >
  <div id="layout">
    <div class="div">DIV 1</div>
    <div class="div">DIV 2</div>
    <div class="div clear">DIV 3</div>
  </div>
</body>
</html>[/code]

效果：

[html]

DIV 1

DIV 2

DIV 3

[/html]

[b]第二种方法：[/b] [color=#FF0000]使用 :after （非 IE 浏览器） [/color]

[code]#layout:after{
    display: block;
    clear: both; content: "";
    visibility:hidden; height: 0;
}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>[/code]

注：使用 :after 需要注意几点，设置高度为零（height: 0;）；content 是必须的，但其值可以为空。

[b]第三种方法：[/b] [color=#FF0000]使用 overflow 属性，这种方法可能是最好的，这个方法不单使用简单，而且FF、OP、IE7都支持 [/color]

[code]#layout {overflow:auto; zoom:1;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div> [/code]

其中zoom是为了IE6预备的。

[color=#B22222][b]注：[/b]忘了一个很主要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。这样的话就有一个问题啦，假设要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以间接定义高度；对于IE7、FF、OP，可定义min-height。[/color]

[b]CSS代码[/b]

[code]overflow
{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}[/code]

      闭合浮动元素：针对firefox用overflow:auto。针对ie用*height:1%或者zoom:1。个人觉得overflow:auto少用为妙，会有些莫明其妙的问题。
最好用这个方法：

[code].clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */ [/code]

请发表您的评论