css中清除浮动_html/css_WEB-ITnose

（1）使用空标签清除浮动

这是目前最常用的一种清除浮动的方法。空标签可以是div标签，也可以是P标签。其实理论上可以是任何标签。这种方法是在需要清除浮动的父级元素内部的最后添加一个清除浮动的空标签，其CSS代码：clear:both。此方法简洁明了，方便实用，但其弊端也很明显，就是增加了无意义的结构元素。此外，有一种与此相似的方法，
也可以实现同样的效果。

（2）使用after伪对象清除浮动

各浏览器均支持after伪对象，所以after应该是适用的，不存在兼容问题。其CSS代码：#layout:after{ display:block; clear:both; content:""; visibility:hidden; height:0;}。使用中需注意：1、该方法中必须为需要清除浮动元素的伪对象设置height:0，否则该元素会比实际高出若干像素；2、content属性是必须的，但其值可以为空。此方法实用有效，且不用添加无意义的标签，但CSS代码较复杂，不够简洁明了。

（3）使用overflow属性

立即学习“前端免费学习笔记（深入）”；

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto;其目的是让高度自适应，zoom:1;是为了兼容IE6(zoom不符合W3C标准)，也可以用height:1%;的方式来解决。