&nb sp;      不同的浏览器显示效果也是不一样的，这样就使得清楚浮动变得困难，闭合浮动因素不是每一种办法都可以做到完美的，那么严格怎么办呢？下面就是爱站小编为大家分享的清除浮动的方法总结，想了解的朋友们一起看看吧。
最简单的一种情形就是我们把一个小的、固定宽度的div元素（比如导航、引用等）和其他元素内容一起包含在一个大的div中。比如下面这段代码：

 

       我们可以为“#inner”设定一个宽度值（比如说20%），但是由于div是块级元素，即使我们设定了宽度，其后面的内容也只能在下一行中显示，除非我们给它设定一个浮动属性（无论是向左浮动或者向右浮动）。那么此时会产生我们上面提到的问题了。
       如果“#inner”的宽度和高度都比“#outer”小，这不会有问题。
       但是，如果“#inner”的高度超过了“#outer”，那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后，它就会脱离的文       本流，无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
       例一：未清除浮动时的布局表现

 

http://www.w3.org/1999/xhtml">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
       在这个例子中，最开始由于“#inner”的高度小于“#outer”所以不会有问题，但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围，而“#outer”没有发生改变。这就是我们所提到的“清除浮动（闭合浮动元素）”或者是“闭合浮动”问题 解决办法：
       1）额外标签法
       第一个，也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签，典型的做法就是使用类似


       或者使用

这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
例二：使用空div闭合浮动元素

 

 

http://www.w3.org/1999/xhtml">

 

 

 

 

 

 

 

 

 

 [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
       P.S. 我发现在Internet Explorer中（无论是6还是7）
       可以清除浮动，但是不能闭合浮动元素，在Firefox中就没有这个问题，不知道是什么原因？！
       2）使用after伪类
       使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容：

 

 

       但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用，所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中，最常用就是Holly招数。Holly招数的原理是这样的，CSS代码
       /* 这段代码只有IE/Win可以看见 \*/
CSS 规则
/* 结束Hack */
       上面的代码中有两行注释，其中第一行结束时出现了反斜杠（\），在Mac的Internet Explorer中会认为注释并没有结束，于是继续向下直到第一个完事的“*/”出现，这中间的所有字符都被当作是注释，而IE/Win却也只会把第一行和第三行看作是注释，中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
       正是基于以上原理，在windows的IE 6上的清理浮动，可以使用如下代码：

 

 

例三：使用:after伪类清理浮动

 

http://www.w3.org/1999/xhtml">

 

 

 

 

 

 

 

 

 

        [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
       P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。
       另外，似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
       如果你对如何使用CSS 2中的伪类不熟悉的话，推荐你先阅读一下“细说CSS样式选择符——CSS 2.1 Selectors（1）、（2）、（3）”
       3）浮动外部元素，float-in-float
       这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。
       例子
       但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。
       例四：float-in-float

 

http://www.w3.org/1999/xhtml">

 

 

 

 

 

 

 

 

 

        [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
       4）设置overflow为hidden或者auto
       把“#outer”的属性overflow值设置为hidden或者auto同样可以清理浮动
       这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心，因为它会浏览器的表现。另外，在Internet Explorer 6中单纯地设置overflow为hidden或者auto并不能有效清除浮动（闭合浮动元素），还要指定“#outer”的一个维度，即要么给它指定一个宽度，要么指定一个高度：

 

 

注意：如果你要在IE5/Mac上使用这种方法清除浮动（闭合浮动元素）的话，你就必须设定overflow的属性为值为hidden。

例五：overflow:hidden

 

http://www.w3.org/1999/xhtml">

 

 

 

 

 

 

 

 

 

 [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行] 比较与选择
       四种方法中使用哪种最好呢？首先，不推荐使用after伪类，对比其它三种方法，holly招数有点太烦琐，不好掌握，我上面讲到的holly招数中并不仅仅是IE/Win上有问题，当出现:hover时还会有其它问题，所以我们又加上了inline-block等属性，也就是说这种方法存在更多的不确定性。推荐对代码有“洁癖”并且技术较高的人使用。
       那么其它三种方法其实都可以考虑。
       不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；
而对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用元素还是空

可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，
本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空