浮动
float半脱离文档流(对元素,脱离文档流;对内容,在文档流)
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
float:left | right | none | inherit;
浮动的特征:
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级
清除浮动:
1.加高
问题:扩展性不好
2.父级浮动
问题:页面中所有元素都加浮动,margin左右自动失效
3.inline-block 清浮动方法:
问题:margin左右auto失效;
4.空标签清浮动
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)
5.br清浮动
问题:不符合工作中:结构、样式、行为,三者分离的要求。
6.after伪元素 清浮动方法(现在主流方法)
.clear:after{
display: block;
content: '';
clear: both;
height: 0;
visibility: hidden;
overflow: hidden;
}
.clear{
*zoom:1;
}
after伪元素: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放 ie6 7兼容
7.overflow:hidden 清浮动方法;
8.position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法;
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)