float浮动的特性以及清除浮动

css中的浮动这个样式是很特殊的。了解浮动之前，一定要先了解一下什么是标准流。
标准流是浏览器在解析标签时默认遵守的规则，也叫做文档流。
为什么要说标准流呢？因为一般情况下（不浮动时），所有的标签都是标准流，而浮动是一种脱离了标准流的技术。

那么现在我们再来说一下浮动的特性：

        1.浮动后的元素会在排序的时候靠上对齐。

        2.浮动对标准流有影响，浮动后的元素会覆盖在标准流元素的上面。

        3.浮动的规则：浮动找浮动，不浮动找不浮动。

        4.浮动是以自己在没有脱离标准流之前的位置为基准进行浮动的。

        5.浮动会改变元素的显示方式：变为inline-block。

        6.左浮动找左浮动，右浮动找右浮动。

        7.文字元素会给浮动元素让位。

那么如果页面发生了浮动，我们该如何确定页面布局呢？

        a.找到不浮动元素，以标准流的形式解析。
        b.找到浮动的元素，以浮动的规则解析。

注：浮动后的元素所在位置是它所在的标准流的位置（它会覆盖标准流）。

float:left和display:inline-block的区别是，两个并列盒子都应用float:left之后，它们的上边框线会对齐，而display:inline-block则使他们的下边框线对齐。

有时（不设置父盒子的高，而子盒子浮动），浮动也会对我们页面的布局造成一定的副作用，为了消除这种副作用，我们需要清除浮动。

清楚浮动之前我们要先知道，到底什么可以清除浮动：对浮动元素相邻的元素应用clear属性。clear属性值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。在清理元素时，浏览器的处理方式是在元素的顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。
所以我们下面应用clear属性清除的方法都是同一个原理：添加一个新的元素，对其应用clear：both，这个被清理元素会在它的顶外边距上添加空间，所以将浮动元素的位置留出来，并撑开浮动元素的父盒子，实现了清除浮动。

总结起来，清除浮动具体有以下几种实现方法：

    1.额外标签法。（使用方法：在需要清除浮动的地方加一个额外的标签，使用clear:both;样式进行清除）（不推荐使用，因为会平添大量的额外标签。）

    2.使用overflow:hidden.（使用方法：在被浮动影响的元素样式中加入overflow:hidden;）
    overflow:hidden原理：触动底层BFC(block formatting context，块级独立化上下文),分配独立渲染区域。
    （不推荐使用，浮动与定位结合使用时会发生冲突。）

    3.*使用伪元素清除。（使用方法：在需要清除的位置加入clearfix类，并在css中加入以下代码。）

        .clearfix:after｛         /*在内容的末尾添加新内容*/
            content: "";          /*添加内容*/
            height: 0;            /*使新内容不占据垂直空间*/
            display: block;       /*使新内容可以有外边距*/
            overflow: hidden;     /*使新内容不被显示*/
            visibility: hidden;   /*使新内容不被显示*/
            clear: both;          /*生成顶外边距核心代码*/
        ｝
        .clearfix{
            *zoom: 1;/*用来兼容IE6/7*/
        }

4.使用双伪元素清除。（推荐）（使用方法与3相同）

        .clearfix:after, .clear:before{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            *zoom: 1;
        }

        5.设置高（不算清除浮动的方法，但可以消除浮动的影响）.