清除浮动之前需注意两点:1、清除浮动一定要在完成布局之后。2、清除浮动必须与前面的浮动标签属于同级关系。
1、空标签清除浮动。在HTML页面中加入一个空标签,用空标签来清除浮动。此标签可以是div或者p等任何标签,<hr>标签要另加上{border:0;}。
HTML:<div class="clear"> <div>
css:.clear{clear:both; height:0;overflow:hidden;}
原理:clear:both是清除所有的浮动,height:0;以及overflow:hidden是用来改变IE6下标签有默认的10px的行高低于10px时将以10px的高度显示bug。
2、overflow清除浮动。
在需要清除浮动的父标签上加入overflow属性即可。但是IE6下不认识此属性则加入zoom:1或者height:1%;
CSS样式为:<style type="text/css">.out{overflow:auto;zoom:1;}</style>
3、after清除浮动。
4、子标签浮动,给父标签浮动。
5、下一标签直接清浮动。
6、使用position:absolute;清除浮动。