浮動布局：
      實現(xiàn)：
          方式一：display:inline-block
              弊端：存在代碼換行被解析
          方式二：float:left
              優(yōu)點：避免代碼換行被解析
                   可左右浮動

      浮動的特性：
          1.浮動的元素排在同一行
          2.浮動的元素內(nèi)容撐開寬度
          3.浮動的元素支持所有的css樣式
          4.浮動的元素脫離文檔流
          5.浮動的元素提升層級半級
              Tips:脫離文檔流后的元素會脫離原來的父級的布局，導(dǎo)致父級無法使用子級來撐開寬高。
              處理方式:清理浮動的操作（BFC）
                  overflow:hidden(溢出避免)  

針對浮動的元素脫離文檔流，接下來我們學(xué)習(xí)上面引入的BFC概念來處理該特性：

  overflow 溢出
      hidden   溢出部分隱藏
      auto     溢出自動出現(xiàn)滾動條
      scroll   始終出現(xiàn)滾動條

  元素的居中（區(qū)別與文本居中）
      margin:0 auto;(外邊距上下設(shè)置為0邊距，左右設(shè)置自動外邊距，生效后即為居中)

  元素的偽類
      :hover (鼠標懸停)
      :after (在元素內(nèi)容之后插入一些內(nèi)容)

  浮動：其實就是使元素脫離文檔流，按照一定的方式排列，遇到相鄰的浮動元素或者父級的邊界停下來。

  BFC (清理浮動，處理浮動元素會脫離文檔流的特性)
      1.父級也浮動；
          弊端：左右的margin:0 auto; 會失效
               層級復(fù)雜時，不好控制布局；
      2.父級加上display:inline-block;
          弊端：左右的margin:0 auto; 會失效
              （如果需要讓元素居中可以給父級加text-align:center）
      3.給父級加高度
          弊端：失去了隨機擴展性
      4.<br>標簽
          作用：換行
          寫法：<br clear="all">
          弊端：不符合w3c的規(guī)范：結(jié)構(gòu)行為樣式三者分離，不推薦
      5.clear
            規(guī)定元素的哪一側(cè)不允許其他浮動元素。
              left  在左側(cè)不允許浮動元素。
              right 在右側(cè)不允許浮動元素。
              both  在左右兩側(cè)均不允許浮動元素。(常用)
          弊端：不符合w3c的規(guī)范：結(jié)構(gòu)行為樣式三者分離，不推薦
      6.偽類清浮動（目前主流方法，推薦使用）
          .clear:after {
            content: "";
            display: block;(必須設(shè)置偽類為塊級顯示標簽，支持css樣式，才能使BFC生效)
            clear: both;
          }
          需要給那個元素清浮動，就把哪個元素的class設(shè)置為clear

針對浮動的元素提升層級半級，我們可以利用該特性，實現(xiàn)類型文字環(huán)繞圖片的效果。