css 清除浮动

众所周知，在css应用中，清除浮动是很重要的，网上也有各种各样的清除浮动的方法，哪种方法好呢？当然各有各的好与不好，大家应该根据情况选择应用，以下是对各种清除浮动的方法的总结

一、使用空标签清除浮动

（1）这种方式是在需要 清除浮动的父级元素内部的 所有浮动元素后添加这样一个标签清除浮动 

（2） 空标签可以是div标签，也可以是P标签或者其他标签。 但是 div 是最常用的，因为它没有浏览器默认样式；没有特殊功能，而且一般不会被 css 样式化。  

缺点： 增加了无意义的结构元素。

优点：简单

demo：

<style>

*{margin:0;padding:0;}
body{font:32px bold; color:#F00; text-align:center;}
#left{float:left;width:20%;height:200px;background:#eee;}
#right{float:right;width:30%;height:80px;background:#ccc;}

.clr{clear:both;}

</style>

 

<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>

<div class="clr"></div>

<div>aaaa</div>

</div> 

 

二、使用overflow属性

优点：父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，因为他不需要额外元素。

缺点：如果父元素设置了高度，要小心不要覆盖住内容或者触发了不需要的滚动条。

tips：overflow:auto，也可以用overflow:hidden替代；”zoom:1″用于兼容IE6，也可以用width:100%。

　　　　zoom不符合W3C标准。

demo：

<style type=”text/css”>

*{margin:0;padding:0;}

body{font:32px bold; color:#F00; text-align:center;}

#layout{background:#FF9;overflow:auto;zoom:1; }   /* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/

#left{float:left;width:20%;height:200px;background:#fdd;line-height:200px;}

#right{float:right;width:30%;height:80px;background:#ddd;line-height:80px;}

</style>

<div id=”layout”>

<div id=”left”>Left</div>
<div id=”right”>Right</div>

</div>

zoom:1兼容IE原因：参考http://baike.baidu.com/view/2945869.htm（haslayout的百科）

三、使用after伪对象清除浮动

使用中需注意以下几点。

（1）该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

（2）content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

demo

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}

但在网上还看到下面代码：我觉得上面代码足可以实现清除浮动

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

至于这些代码为什么，不太清楚，参考http://www.cnblogs.com/zllwebjs/archive/2010/03/19/1689980.html

四、 浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

缺点：这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。

优点：有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。

demo：

<style>

*{margin:0;padding:0;}

body{font:32px bold; color:#F00; text-align:center;}

#layout{background:#FF4;float:left;}

#left{float:left;width:20%;height:200px;background:#ffd;}

#right{float:right;width:30%;height:80px;background:#dfd;}

</style>

 

<div id=”layout”>

<div id=”left”>Left</div>

<div id=”right”>Right</div>

</div>

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/hongsemantuoluo/archive/2012/04/18/2455201.html