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...