web清除浮动的几种方式

浮动对页面的影响：

如果一个父元素中包含一个子元素，父元素没有设置高度，子元素再父元素中进行了浮动。那么这个时候，父元素的高度为0，因此父元素的兄弟元素就会自动部位，那么这个时候就需要进行浮动的清除。

html代码及样式：

存在浮动问题的html

html表现的样式

清除浮动后效果

解决方法：

方法一：直接给父元素添加 height

.div1{ height:200px; }

原理：父元素div手动定义height，就解决了父元素div无法自动获取到高度的问题

优点：简单、代码少、容易掌握

缺点：只能使用高度固定的布局，要给出精确的高度，如果高度和父元素div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

方法二：结尾处加空的div标签：clear:both

修改上面的原来的代码为下面的样子：


LEFT


RIGHT



.clearfloat { clear : both; }

原理：添加一个空div 利用css提高的clear：both清除浮动，让父元素div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要添加很多空div，感觉不好

建议：不建议使用，但此方法是以前主要使用的一种清除浮动方法

补充：css clear属性（点击此处访问）

方法三：父元素div定义伪类:after 和 zoom

.div1:after{

    diaplay:block;

    clear:both;

    content:'';

    visibility:hidden;

height:0;

}

.div1{ zoom:1; }

原理：IE8以上和非IE浏览器才支持：after，原理和方法2有点类似，zoom（IE专有属性）可解决IE6、IE7浮动问题

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾讯，网易，新浪等）

缺点：代码多，不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

建议：建议使用，建议定义公共类，以减少CSS代码

方法四：父类div定义 overflow:hidden

.div1{

width:98%;

overflow:hidden;

}

原理：必须定义width或zoom:1,同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸会被隐藏

建议：只建议没有使用position或对overflow:hidden理解比较深的朋友使用

方法五：父元素div定义 overflow:auto

.div1{

width:98%;

overflow:auto;

}

原理：必须使用width或zoom:1;同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父元素div时间，会出现滚动条

建议：不建议使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧

最后：

参考访问的页面：http://www.jb51.net/css/173023.html

另外还有几个不建议的没有列举出来，感兴趣的可以进入上面的网页查看。

另外：设置元素浮动后，该元素的display值自动变成block