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, 向左偏移的过程中也上移了
