css能够清楚浮动的是,CSS清除浮动

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

我们想要的效果是这样的


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


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

```php

.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`属性用于清除浮动，其基本语法格式：

| 属性值| 描述 |

|--|--|

| left |不允许左侧有浮动元素(清除左侧浮动的影响) |

|right|不允许右侧有浮动元素

both|同时清除左右两侧浮动

### 清除浮动方法

**1.额外标签法**(不推荐)

是w3c推荐的做法，通过在浮动元素末尾添加一个空的标签如`

优点：通俗易懂，方便书写

缺点：添加了无意义的标签，结构化较差

**2.父元素添加overflow属性**

添加overflow属性触发BFC方式，以实现清除浮动

给父元素添加`overflow:hidden|auto|scroll`

优点：代码简洁

缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉

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

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

```php

//定义一个清除浮动的类

.clearfix::after{content="" display:block;heihgt:0;clear:both;visibility:hidden}

```

优点：符合闭合思想

缺点：ie6,7不支持after需进行兼容处理

ie6,7使用

```php

.clearfix{

*zoom:1;

}

```

**4.使用before和after双伪元素清除浮动**

优点：更符合闭合浮动思想，最完美的方式

缺点：兼容性 ie6,7使用`zoom`

```php

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both

}

.cearfix{

*zoom:1;

}

```