清除浮动

一、浮动作用

浮动是css布局中常用的一种css属性，主要用于块级元素的横向排列。

二、浮动带来的不良影响

在这里看实例比较直观，借鉴网上的一幅图(偷懒)

注意：

这里我没有给最外层的红色DIV设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示

三、清除浮动

• 方法一：添加新的元素 、应用 clear：both；
  HTML：

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

CSS:

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

• 方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）
  HTML：

<div class="outer" style="overflow:auto;zoom:1">//zoom:1;处理兼容问题
    <div class="div1">1</div>
    <div class="div2">2</div>
</div>

• 方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）
  原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/