关于css浮动和定位的一些知识

关于CSS的浮动

脱离文档流 按照既定方向移动 遇到父级边界或相邻元素停止 

表现形式 

1.块在一排显示
2.内联元素支持宽高
3.默认内容撑开宽度
4.脱离文档流
5.提升层级半层

CSS浮动的清除

clear 清除浮动是有限制的

1只能对块级元素有作用

2只能对元素自身产生作用不能改变父级元素的浮动

清除浮动对页面的整体布局影响方法

1.父级设置高度 浮动元素已经不能把父级宽高撑开 （扩展性不好 父级高度必须确定）

2.父级同时设置为浮动元素 （影响后面的非浮动元素布局）margin:auto 会失效

3.inline-block方法清除浮动 margin:auto 会失效 兼容性问题

4.空标签清除浮动 导致过多空标签 IE6不兼容 

5.br清除浮动 设计理念不符合标准

6.overflow:hidden 清除浮动需要配合宽度 IE不兼容

7.after/before伪类清除浮动元素 

div:after{
  content:"";//块元素增加内联标签设置的区域
  display:block;
  clear:both;
}

BFC  block formatting context 块级格式上下文 设置为float会触发 元素有自己独立的空间  可以包裹父级元素 

改变此种情况 

文档流模式下 块级元素 margin-bottom margin-top 会重叠 margin-top会传递属性给父级

触发方式

float不为none overflow值不为visible  display=(inline-block table-caption table-cell) position值不为(relation static)   元素设置width height

关于CSS的定位

1.position:relative

1.不影响元素本身的属性
2.不使元素脱离文档流（元素移动之后原始位置保留）
3.可提升层级
4.如果没有left top等偏移量一起使用 对元素不产生影响

2.position:obsolute

绝对定位的定位偏移参照物 离他最近的有定位属性的父级

1.不使元素脱离文档流（元素移动之后原始位置保留）
2.内嵌支持宽高
3.块状属性标签内容撑开宽带
4.如果有定位父级相对于定位父级发生偏移没有就相对于document发生偏移
5.一般配合相对定位使用
6.提升层级

position:fixed

始终相对于整个文档的进行的绝对定位