7、浮动样式与BFC常见方法

display:inline-block; // 内联块

float：浮动

    特性：
           1、浮动的元素排在一排；
           2、浮动的元素内容撑开宽度；
           3、浮动的元素支持所有css样式；
           4、浮动的元素脱离文档流；
           5、浮动的元素提升层级半级。
    文档流：文档中可显示对象在排列时所占的位置。
           1、overflow：溢出
                会重新计算元素的空间；
                hidden: 溢出隐藏；
                auto: 溢出展示滚动条；
           2、元素的居中
                margin: 0 auto;
           3、元素的伪类
                伪类：一些元素身上的特殊css属性（效果）；
                :hover 鼠标悬停
                :after 在元素内容之后插入一些内容；
   浮动：其实就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。

BFC：就是清浮动，用来处理元素脱离文档流的问题；

    1、父级也浮动；
        弊端：左右的margin: 0 auto;会失效；
    2、父级加display:inline-block;
        弊端：左右的margin: 0 auto;会失效,如果需要居中。可以给父级加text-align:center;
    3、父级加height；
        弊端：扩展性不好；
    4、br标签 (不符合w3c规范)
        写法：

        作用：换行 
    5、clear (不符合w3c规范)
         元素的某一方向不允许出现其他的浮动元素；（left/right/both/one）
    6、伪类的清浮动
          :afer {
                 content: "";
                 display: block;
                 clear: both;
          }
    温馨提示：目前主流方法，建议使用。