7、浮动布局和BFC

  浮动布局：
      实现：
          方式一：display:inline-block
              弊端：存在代码换行被解析
          方式二：float:left
              优点：避免代码换行被解析
                   可左右浮动

      浮动的特性：
          1.浮动的元素排在同一行
          2.浮动的元素内容撑开宽度
          3.浮动的元素支持所有的css样式
          4.浮动的元素脱离文档流
          5.浮动的元素提升层级半级
              Tips:脱离文档流后的元素会脱离原来的父级的布局，导致父级无法使用子级来撑开宽高。
              处理方式:清理浮动的操作（BFC）
                  overflow:hidden(溢出避免)  

针对浮动的元素脱离文档流，接下来我们学习上面引入的BFC概念来处理该特性：

  overflow 溢出
      hidden   溢出部分隐藏
      auto     溢出自动出现滚动条
      scroll   始终出现滚动条

  元素的居中（区别与文本居中）
      margin:0 auto;(外边距上下设置为0边距，左右设置自动外边距，生效后即为居中)

  元素的伪类
      :hover (鼠标悬停)
      :after (在元素内容之后插入一些内容)

  浮动：其实就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。

  BFC (清理浮动，处理浮动元素会脱离文档流的特性)
      1.父级也浮动；
          弊端：左右的margin:0 auto; 会失效
               层级复杂时，不好控制布局；
      2.父级加上display:inline-block;
          弊端：左右的margin:0 auto; 会失效
              （如果需要让元素居中可以给父级加text-align:center）
      3.给父级加高度
          弊端：失去了随机扩展性
      4.<br>标签
          作用：换行
          写法：<br clear="all">
          弊端：不符合w3c的规范：结构行为样式三者分离，不推荐
      5.clear
            规定元素的哪一侧不允许其他浮动元素。
              left  在左侧不允许浮动元素。
              right 在右侧不允许浮动元素。
              both  在左右两侧均不允许浮动元素。(常用)
          弊端：不符合w3c的规范：结构行为样式三者分离，不推荐
      6.伪类清浮动（目前主流方法，推荐使用）
          .clear:after {
            content: "";
            display: block;(必须设置伪类为块级显示标签，支持css样式，才能使BFC生效)
            clear: both;
          }
          需要给那个元素清浮动，就把哪个元素的class设置为clear

针对浮动的元素提升层级半级，我们可以利用该特性，实现类型文字环绕图片的效果。