html+css----清除浮动的方法

1、额外标签法：

这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear：both”的元素，强迫容器适应它的高度以便装下所有的float元素

<div>

<div id="left">左盒子</div>

<div id="right">右盒子</div>

<div class="clear"></div>   //增加一个空div

</div>

<div id="footer">底部</div>

2、父元素使用overflow的方法：

• 通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但如果子元素使用了定位布局，就会很难实现
• css中溢出的使用

• 定位：position
  • 属性：position
  • 描述：设置对象的定位方式
  • 值：
  • static 静态定位：页面中的每一个对象的默认值。
  • absolute 绝对定位：将对象从文档流中分离出来，通过设置left，right，top，bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
  • relative 相对定位：对象不从文档流中分离，通过设置left，right，top，bottom四个方向相对于自身对象进行相对定位。

*************当我们要想使用绝对定位时，必须要有两个条件*********************************

【1】、必须给父元素加定位属性，一般建议使用position:relative;

【2】、给子元素加绝对定位position:absolute;同时要加方向属性。

3、利用伪对象after方法：

定义一个类，使用伪对象after，控制浮动元素的影响。‘

网上最流行的清除浮动代码：

.clearFix:after{

clear:both;

display:block;

visibility:hidden;

height:0;

line-height:0;

content:".";

}

.clearFix{zoom:1;}  //解决IE6、IE7兼容问题