一、使用float的弊端
浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。
举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.f{
float:left;
height:300px;
border:solid 1px black;
}
.nf{
height:100px;
border:solid 1px red;
}
.beF{
border:solid 1px blue;
}
</style>
</head>
<body>
<div>
<div class="f">
我是浮动元素
</div>
<p class="nf">
我和浮动元素在同一个div
</p>
</div>
<div>
<p class="beF">
可以看到浮动元素已经能够超出了div，并盖住了我
</p>
</div>
</body>
</html>
效果： 
二、清除float溢出的方法
1.使用 clear 样式清除
.clear-float {clear:both;}
clear 属性是 CSS 1 就提供的用来清除浮动的样式，设置了 clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，忽略其 margin-top 设置。这样，父容器高度未设定(值是 auto)时，由于定义的清理浮动样式元素所在位置处于浮动元素之下，容器计算后的实际高度就包含了浮动元素。
2.使用伪元素 :after 清除
.after-clear-float :after{content:””; display:block; clear:both;}
:after 伪元素是在 CSS 2 规范内提出的，IE 6/7 并不支持。它的作用是在指定该伪元素元素内，所有子元素最后自动生成一个伪元素，并可以为这个伪元素设定样式。在设定样式中，使用 clear 属性即可达到与手工添加元素指定清理的效果。
3.使用 overflow 清除
.overflow-clear-float {overflow:hidden;}
或者
.overflow-clear-float {overflow:auto;}
overflow 样式值为 非 visilbe 时，实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素，会重新计算其内部元素位置，从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩，在 CSS 3 草案中被变更为名词 Root Flow，顾名思义，是创建了一个新的根布局流，这个布局流是独立的，不影响其外部元素的。实际上，这个特性与 早期 IE 的 hasLayout 特性十分相似。IE6/7不支持。
4.使用 display:table 清除
.table-clear-float {display:table}
或者
.table-clear-float {display:table-cell}
当元素 display 值被设定为 table 或 table-cell 时，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。所以同样不支持IE6/7。
三、避免使用float，用更好的方法处理
1.无序链接
经常可以看到一些网站的关键字链接，或者产品关键字，已经分类等部分会用到比较短的链接混乱排列，有些人使用<ul><li>配合float来做链接，我想这个是完全没有必要的，你可以设定<li>标签的display:inline，把<li>设定为线级元素来达到混排的效果，不需要使用float。甚至这样的 链接完全可以由<p><a>这样的标签来代替，岂不是更简洁？
2.右端元素
我们在做一个区块的时候经常使要用more（更多）来链接相关的页面，这样的标题栏往往左边是标题，右边为more链接，很多人喜欢用 float来做，这样在float之后还要多一个标签来clear，感觉很繁琐，甚至更有人用整张图片配合热点来做，我觉的这些都不是很好的办法。其实像这种效果完全可以用定位来做，设定title的position:relative。然后定义more这个标签的right:0等更详细的设定它的位置。这样省去了float以及clear，结构也更清晰了。
3.多列不规则布局
我们经常要用到3列布局，这种布局由于规则，但是为了美观，我们必须定义3列的总宽度，但是根据CSS中浮动的总宽必须<99%的父标签宽度，否则经常会在某些浏览器下出错，但是99%的宽在宽屏显示器下面很明显会出现10px以上的错位，所以这是一个很郁闷的 问题，其实在碰到这类问题时我们应该有限使用position定位来解决问题，而不是浮动，这个问题在这里就不多说了，下面会有一篇关于定位的详细文章。
参考：
http://w3help.org/zh-cn/casestudies/001
http://www.cnblogs.com/showker/archive/2010/05/22/1741477.html
1365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
