6.1 float的本質與特性

浮動的本質是為了實現文字環繞效果

float特性:

• 包裹性（eg:父元素寬200px，子元素為寬128px的圖片，此時表現出包裹；子元素寬超過200px,則自適應父元素寬度，最終為200px）(包裹自適應兩部分組成)
• 塊狀化並格式化上下文（塊狀化：一旦float屬性值不為none，其display計算值為block或者table）
• 破壞文檔流

• 沒有任何margin合並

  tips：不要用text-align屬性控制浮動元素的左右對齊，對塊級元素是無效的。

  float浮動機制：float屬性的作用之一就是使父元素高度坍塌（這不是bug）。行框盒子和浮動元素不可重疊（行框盒子如果和浮動元素的垂直高度有重疊，則行框盒子在正常定位狀態下只會跟隨浮動元素，不會發生重疊）可以看個有趣例子

  6.2 float與流體布局

  借助float特性，可以實現兩欄或多欄自適應布局

  一側定寬的兩欄自適應布局：

  eg:.father{
  overflow:hidden;
  }
  .father > img{
  width:60px;
  height:64px;
  float:left;
  }
  .animal{
  margin-left:70px;
  }

  如果寬度不固定，用百分比寬度也ok

  中間居中的左中右布局：

   eg:<div class="box">
       <a href="#" class="prev">上一章</a>
       <a href="#" class="next">下一章</a>
       <h3 class="title">瘋狂動物城</h3>
     </div>
      .prev{float:left;}
      .next{float:right;}
      .title{margin:0 70px;text-align:center;}
   
  

  6.3 clear屬性

  元素盒子的邊不能和前面的浮動元素相鄰

  tips:凡是用clear:left或clear:right的地方均可以用clear:both替換（clear對"後面的"浮動元素是不聞不問的）

  clear屬性只有塊級元素才有效，因此在使用::after清除浮動時要設置display

    .clear{
          content="";
          display:table(也可以是block/list-item);
          clear:both;
          }

  6.4 BFC

  block formatting context 塊級格式化上下文

  內部子元素不會影響到外部的元素

  觸發BFC的情況：

• 根元素
• float的值不為none
• overflow的值為auto,scroll,hidden
• display的值為table-cell、table-caption、inline-block中的任意一個

• position的值不為relative和static

  元素符合上面任意一個條件，無需使用clear:both清除浮動

  普通流體元素在設置了overflow:hidden後，會自動填滿容器中除浮動元素以外的剩余空間，形成自適應布局效果

  與基於純流體特性實現的兩欄或多欄布局相比，基於BFC布局的優點：1）自適應內容由於封閉而更健壯，容錯性更強 2）自適應內容自動填滿浮動以外區域，無需關心浮動元素寬度

  能擔任自適應布局重任的：

• overflow:auto/hidden,適用IE7以上版本
• display:inline-block,適用於IE6和IE7

• display:table-cell,適用於IE8及以上版本

  6.5 overflow與錨點定位

  實現錨點跳轉方法：1）a標簽以及name屬性 2）利用標簽的id屬性

  錨點定位的觸發條件：1）URL地址中的錨鏈與錨點元素對應並有交互行為 2）可focus的錨點元素處於focus狀態

  錨點定位的本質是改變了scrollTop或scrollLeft的值

  使用錨點定位來實現選項卡切換效果 戳這裏 不足之處：1）容器高度需要固定 2）"由內而外"的錨點定位會觸發窗體的重定位，若頁面也是可以滾動的,則點擊按鈕後頁面會發生跳動

  使用"focus"錨點定位 戳這裏 通過for屬性與input輸入框的id相關聯，點擊按鈕觸發輸入框的focus行為，觸發錨點定位。 實際項目裏還需用到JS，處理列表部分區域在瀏覽器外面時依然跳動的問題

   $("label.click").removeAttr("for").on("click",function(){
      $(".box").scrollTop(xxx);
     )};

來自張鑫旭大大的《css世界》學習筆記--- about float