# 清除浮动的方法

浮动 Float 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。

清除浮动是面试中经常遇到的问题，总结一下清除浮动的方法：

设置原型，一个父元素，两个子元素左浮动

```markup
<div class="parent">parent
    <div class="son1">son1 float:left</div>
    <div class="son2">son2 float:left</div>
</div>
.parent {
    background: #999999;
}
.son1,.son2{
    background: #f5e327;
    float: left;
    width: 100px;
    height: 100px;

}
.son2{
    background: #ff1810;
}
```

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4XZ4REKb_l0mwGqF5%2Fclear.png?generation=1532322533639989\&alt=media)

清除浮动实现目的使**父元素的高度被子元素撑满。**

## 1、clear: both

添加 空div标签，放在父元素最后一个子元素位置，设置样式为clear：both。

```markup
<div class="parent">parent
    <div class="son1">son1 float:left</div>
    <div class="son2">son2 float:left</div>
    <div class="clear"></div>
</div>
.clear{
    clear: both;
}
```

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4XZ4U_2_DvxO_-MDG%2Fclear1.png?generation=1532322533645615\&alt=media)

## 2、设置父元素高度

如果子元素高度确定，则设置父元素高度等于子元素高度，则看起来父元素被子元素撑满，如果子元素高度不确定，这个方法不合适。

```markup
.parent {
    background: #999999;
    height: 100px;
}
```

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4XZ4WZ3K2geFkzOrr%2Fclear2.png?generation=1532322534204477\&alt=media)

## 3、使用BFC

BFC有一个特点：计算BFC的高度时，浮动元素也参与计算，我们可以将父元素设置overflow属性形成BFC，这样浮动元素的高度也会参与计算，父元素的高度就会被浮动元素的高度撑满。

```markup
.parent {
    background: #999999;
    overflow: auto;  
   /* overflow: hidden;*/  或者hidden
}
```

效果和上图一样。

## 4、万能清除法`after伪类`清浮动

利用`:after`和`:before`来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于`clear:both`方法，只是区别在于:clear在父元素最后插入一个div.clear标签，而伪类清除法利用父元素的伪类在元素内部增加一个类似于div.clear的效果，没有在原来HTML文件中操作DOM。

这是目前最主流的清除浮动的方法，推荐优先使用。

```markup
.parent:after{
    content: "";
    display: block;
    clear: both;
}
```

效果同上

## 5、使用table清除浮动

```markup
.parent {
    background: #999999;
    display: table;
}
```

效果如下

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4XZ4_M3MCfh4BYZDJ%2Fclear5.png?generation=1532322534167631\&alt=media)

## 6、以浮制浮

将父级同样设置为浮动，能让子元素撑满整个父元素，但是再整体布局中，父元素也变成浮动了并不是我们想要的，除非父元素已经确定位置。

```markup
.parent {
    background: #999999;
    float: left;
}
```