CSS 清除浮动的几种方法

导读：

CSS 的 Float(浮动)，会使元素向左或向右移动，其周围的元素也会重新排列，Float(浮动),往往是用于图像,使得文字围绕图片的效果，而它在布局时一样非常有用。不过有利也有弊，使用浮动的时候也会带来一些负面效果。为了不因浮动元素破坏整个文档的布局，所以需要清除浮动，而今清除浮动的方法众多，在此就常见的方法进行理解和记录。

基本概念

首先我们来看一下下面这种情况：父元素的边框未被撑开，子元素从下方溢出。

清除浮动前

清除浮动后

为什么会产生上面的情况呢，由于浮动的特性，导致本属于普通流中的元素浮动之后脱离了该流，包含框内部由于不存在其他普通流元素了，也就表现出所谓高度塌陷。而高度的塌陷使页面后面的布局不能正常显示，造成我们本不期望的效果，总的来说浮动带来的负作用包括：

• 边框不能撑开
• 背景不能显示
• margin 设置值不能正确显示

清除方法

由于浮动带来的影响，所以清除浮动很有必要，而今清除浮动方法不少，不过个别方法也存在着兼容性的问题，接下来就常用的几种方法做下简单的介绍。

1、使用clear属性

在浮动元素下方添加空div,并给该元素写css样式：

    //代码简洁，浏览器支持好
    .clearfix{ clear:both }
    //增加了无意义的结构元素
    

2、使用overflow属性

给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden：

    ////代码简洁
    .overflow: hidden; zoom: 1; //zoom: 1; 兼容低版IE
    //不能和position配合使用，因为超出的尺寸的会被隐藏
    

3、为父元素指定高度

给浮动元素的父元素指定高度：

    //简单，简洁
    width： * px;
    //只适合高度固定的布局
    

4、伪元素（推荐）

给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden：

    .clear{ zoom: 1; }     // zoom: 1; 兼容低版IE
    .clear:after{
        content: '';
        display: block;
        clear: both;
        height: 0;         // 避免生成内容破坏原有布局的高度
        overflow: hidden;
        visibility: hidden;}
    

zoom 属性目前是IE的专有属性，设置该值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变该值时其实也会发生重新渲染，运用这个原理，也就解决了 IE 下子元素浮动时候父元素不随着自动扩大的问题。

写在最后

清除浮动常用的方法大概就是这几个，在不同的场景下选用最合适的方法就是最好的方法。更多内容点击查看 CSS 浮动。

如果文中有什么错误，欢迎大家指正，愿与大家在交流之中共同进步，愈激烈，愈深刻。感谢。