Float浮动、CSS定位(position)

float: left | right | none | inherit;（只能左右浮动，不能上下浮动）

 

float特征：

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

clear清除浮动：

1. clear : left | right | both | none | inherit; （元素的某个方向上不能有浮动元素）
2. clear : both; （在左右两侧均不允许浮动元素）

清除浮动的方法：

1. 加高（问题：扩展性不好）
2. 父级浮动（问题：页面中所有元素都加浮动，margin左右自动失效）
3. inline-block 清除浮动方法（问题：margin左右auto失效）
4. 空标签清浮动（问题：IE6最小高度19px;(解决后IE6下还有2px偏差)）
5. br 清除浮动（问题：不符合工作中：结构、样式、行为，三者分离的要求）
6. after伪类 清除浮动方法：给元素尾部添加内容或者zoom缩放（触发IE下 haslayout，使元素根据自身内容计算宽高，FF不支持）
7. overflow:hidden 清除浮动（问题：需要配合宽度或者zoom 兼容IE6、IE7）
8. （overflow: scroll | auto | hidden; overflow: hidden;溢出隐藏）

CSS定位：

1. 只有position属性值为relative、absolute、fixed才可以使用,top、right、bottom、left属性。
2. static静态定位（不对它的位置进行改变）
3. fixed固定定位（参照物—浏览器窗口）——做弹窗广告用（生成固定定位的元素，相对于浏览器窗口进行定位）
4. relative相对定位（参照物以他本身）（生成相对定位的元素，相对于其正常位置进行定位）
5. absolute（绝对定位）（除了static都可以，找到参照物，与它最近的已经有定位的父元素进行定位）（生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位）

 

z-index：

1. z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
2. 定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

一切皆为框：

1. 块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;
2. 行内元素: span,strong,a等元素 即：内容显示在行中称 “行内框”;
3. 使用display属性改变成框的类型 即：display:block; 让行内元素设置为块级元素，display:none; 没有框