CSS 清除浮动的三种方式

代码：

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

其 css 样式为：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

展现效果为：

这里没有给最外层的 div 设置高度，但是如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了以下影响：

（1）背景不能显示 （此处有背景是因为我设置了padding）  （2）边框不能撑开 

下面介绍清除浮动的三个方法：

方法一： 伪类 :after 方法 （推荐）

在 css 中添加 :after 伪类

.outer:after{clear:both; content:'.'; display:block; width: 0; height: 0; visibility:hidden;}

其中 clear:both; 指清除所有浮动，content: '.'; display:block; 对于 FF/chrome/opera/IE8 不能缺少，其中 content 可以取值也

可以为空，visibility:hidden; 的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

方法二：父级 div 添加样式 overflow: auto

即在 css 的 .outer 类中添加一个样式 overflow: auto;

overflow 属性共有三个属性值：hidden, auto, visible。我们可以使用 hiddent 和 auto 值来清除浮动，但切记不能使用visible

值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，但是 auto 对 seo 比较友好。

方法三：添加空元素

在 div3 的下面添加一个空元素：

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

在 css 中为其添加样式：

.clear{clear:both; height: 0; line-height: 0; font-size: 0;}

应用以上任何一种方法都可以清除浮动，效果如下：