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, 向左偏移的过程中也上移了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。