iMooc-張鑫旭 CSS

float

float 歷史

float 的初衷僅僅是：文字環繞效果

float 特性

• flock formatting context -- 塊級格式化上下文
• 具備包裹性的元素：

  display: inline-block / table-cell
  position: absolute / fixed / sticky
  overflow: hidden / scroll

• 浮動的破壞性，會讓父元素塌陷，其餘表明有：

  display: none
  position: absolute / fixed / sticky

• 清除浮動

  • 方法一：浮動底部插入 clear: both;

    • HTML，跟在浮動元素後面，加一個 div
    • CSS，after 僞元素底部生成：.clearfix:after {} 不兼容 IE6,7
  • BFC / haslayout 一般聲明
  • 權衡以後

  .clearfix:after { content:''; display: block; height: 0; overflow: hidden; clear: both; }
      .clearfix { *zoom: 1 }    // 只有 IE 認識的屬性

  • 更加簡潔

  .clearfix:after { content:''; display: table; clear: both; }
      .clearfix { *zoom: 1 }

浮動的幾種佈局

• 兩側皆自適應

核心代碼：
    
    左側div: float: left;

    右側div: display: table-cell; width: 9999px;   <---沒錯width就是 9999px  // 兼容 IE *display: inline-block; *width: auto;

• 右側固定尺寸

• 浮動與右側尺寸固定的流體佈局，DOM 和視圖位置不一致

  左側div: margin-right: 100px;
  
   右側div: float: right;

• 浮動與右側尺寸固定的流體佈局，DOM 和視圖位置同樣

  左側div: width: 100%; float: left;
  
   右側div: width: 56px; float: left; margin-left: -56px;
   
       margin-left，等於右側 div 自身的寬度 width: 56px, 向左偏移的過程當中也上移了

---

border

參考

http://www.zhangxinxu.com/wor...