【CSS】清浮动的10种方法与利弊分析

一 、 给浮动元素的父级加高度；

 分析：一般情况下，父元素的高度是由子元素来撑开，但由于子元素设置了浮动，所以会脱离文档流，父元素的高度为0，给父元素加高度，高度需要大于浮动子元素的最大高度。否则，会出现父元素包不住子元素的情况。具体效果，给父元素和子元素分别加背景色便可以看到。这里就不贴代码了。我本人并不支持这种方式，有“作假”嫌疑。

二、在浮动元素下加空标签<div class="clear"></div> ；

 样式为.clear{content=""; display="block" clear:both;} 

分析：这个方式可实现传统意义上的清浮动，但会造成多余的html标签，在注重提高页面性能的前进方向上，会渐渐淘汰这种写法。

三、直接给浮动父元素加 clear 样式；

  样式为：.clear:after{content=""; display="block"; clear:both;}

分析：这种方式是我过去最喜欢的一种写法，既可以减少不必要的代码，也可以有效清除浮动，也比较符合W3C的语义化，但需要写clear样式。

四、给浮动父元素加浮动；

分析：采用这种方式的话，需要给父元素后 所有的容器都加浮动。否则当父元素已脱离文档流，而后面的元素却从文档最开始排列，造成后面元素被当前父元素遮挡的状况。有一些原始页面采用这种方式布局。

五、在浮动元素下 加<br clear="all"/> 

分析：br本身就具有清浮动的属性，使用这个方式也可以有效清除浮动。

六、给浮动父元素加 overflow:hidden;

分析：这是我最近特别喜欢的写法，既可以实现清浮动，又可以减少多余标签带来的代码冗余。

七、给浮动父元素加 overflow:auto;

分析：这种写法与上述写法 大同小异，但如果需要父元素出现滚动条的情况，采用这个方式可以一举两得。推荐使用。

八、给浮动父元素加绝对定位 position:absolute;

分析：绝对定位的本质也是脱离文档流，对元素进行定位。与第二种方法类似，好处是，父元素需要绝对定位时，采用这个方式可以同时实现清浮动。

九、给浮动父元素加固定定位 position:fixed;

分析：与上述方式大同小异，需要根据具体情况使用。

十、给浮动父元素加 display:table;

分析：什么鬼，我也不造。总之这种方法也能实现就对了。哈哈哈。

End:  有落掉的，欢迎评论补充！