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

参考