CSS清除浮动的三种方法

一、clear:both清除浮动

最原始的清除浮动方式，兼容性最好，在浮动的内容的后面加个div定义它的sytle为clear:both。具体代码如下：

.clear{
  clear:both
}
.box{
 float:left;
}

<div class="content">
<div class="box">box</box>
<div class="box">box</box>
<div class="box">box</box>
<div class="clear"></div>
</div>

二、父级元素定义overflow:auto

这种方式利用父级元素的ouverflow属性来实现清除浮动，设置overflow:auto;后超出父级元素的内容会自动被包括进来，结果可想而知。代码如下

.box{
 float:left;
}
.content{
  overflow:auto;
}

<div class="content">
<div class="box">box</box>
<div class="box">box</box>
<div class="box">box</box>
</div>

三、利用伪类:after(推荐)

这种方式为父级元素添加一个伪类:after，并在伪类中定义clear:both。代码如下：

.box{
  float:left;
}
.content:after{
  clear:both;
}

<div class="content">
<div class="box">box</box>
<div class="box">box</box>
<div class="box">box</box>
</div>