CSS清除浮动

了解为什么要清除浮动我们先来看一个例子

我们想要的效果是这样的

son1和son2并排显示，不会影响底部蓝色的盒子，要实现这种效果我们先写出元素，如下

如果我们想son1和son2盒子并排显示，那么设置他们左浮动

.son1{
            width:100px;
            height:30px;
            background: orange;
            float: left;
        }
        .son2{
            width:100px;
            height:30px;
            background: red;
            float: left;
        }

结果并没有像我们想象的那样，son盒子虽然并排显示了，但蓝色的盒子本应在下面，现在确跑上来了，为什么会这样呢？

这是因为，当我们父元素没有设置高度的时候，子元素浮动会导致父元素高度为0的问题。

son盒子被一个父盒子装着，当父盒子高度为0时，蓝色的盒子自然就上去了？ 怎么解决这种问题？

1.既然是因为父元素没有设置高度而引起的，那么设置父元素高度不就可以了吗，的确这也是一种解决办法。但我们实际在开发中一般不设置高度，因为我们不知道子元素有多少内容，不能把高度写死。

2.就是今天要讲的使用css清除浮动

清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，不让他们出来影响其他的元素。

在css clear属性用于清除浮动，其基本语法格式：

清除浮动方法

1.额外标签法（不推荐）

是w3c推荐的做法，通过在浮动元素末尾添加一个空的标签如<div style='clear:both'></div> 优点：通俗易懂，方便书写 缺点：添加了无意义的标签，结构化较差

2.父元素添加overflow属性

添加overflow属性触发BFC方式，以实现清除浮动 给父元素添加overflow:hidden|auto|scroll 优点：代码简洁 缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉

3.使用after伪元素清除浮动

这种方式跟额外标签法类似，好处是不用单独定义标签了

//定义一个清除浮动的类
.clearfix::after{content="" display:block;heihgt:0;clear:both;visibility:hidden}

优点：符合闭合思想 缺点：ie6,7不支持after需进行兼容处理 ie6,7使用

.clearfix{
    *zoom:1;
  }

4.使用before和after双伪元素清除浮动 优点：更符合闭合浮动思想，最完美的方式 缺点：兼容性 ie6,7使用zoom

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}

.clearfix:after{
    clear:both
}
.cearfix{
    *zoom:1;
}