ccs清除浮动

以前一直都是用clear:both来清除浮动，但随着css3的普及，这种方式似乎并不是最佳的解决方案，这里总结下这几天学到的清除浮动的方式。

一、clear:both清除浮动

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

/*

**css代码

*/

.content{

  background:#000;

}

.clear{

  clear:both

}

.box{

float:left;

}CSS

<!-- html -->

<div class="content">

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

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

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

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

</div>HTML

二、父级元素定义overflow:auto

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

/*

**css

*/

.content{

  overflow:auto;

  background:#000;

}CSS

<!-- html -->

<div class="content">

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

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

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

</div>HTML

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

这种方式为父级元素添加一个伪类:after,如果不了解伪类的可以自行百度。并在伪类中定义clear:both。代码如下：

/*

**css

*/

.content{

  background:#000;

}

.content:after{

  clear:both;

}CSS

<!-- html -->

<div class="content">

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

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

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

</div>HTML

原文链接