CSS中定位浮动position float 总结

1.浮动有哪些现象？

1.脱离标准文档流，不占页面位置,元素也不再具有自己本身的属性(如span不再具有行内元素特点) 
2.文字环绕，设置浮动属性的初衷
3."贴边"现象，设置浮动属性后，首选找有浮动盒子的边找到了就会贴到浮动盒子的边上，若找不到，则找父元素的边
4.收缩现象，只显示内容的宽度，

浮动带来的问题：不去计算浮动元素的高度，导致撑不起父盒子的高度

2.清除浮动的方式？

1.给父元素设置固定宽高(不灵活，后期不易维护)
2.内墙法：给最后一个浮动元素的后面添加一个空的【块级标签】，并且该属性clear:both
3.伪元素清除法 clear:both 给【父元素添加一个类】 
  .clearfix:after{
			content:'';
    	display:block;
    	clear:both
  }
4.overflow:hidden  基于bfc 给【父元素设置】

3.overflow:hidden和overflow:scroll属性的作用？

overflow:hidden; 超出部分隐藏
overflow:scroll;出现滚动条

清除浮动定位

4.定位有哪几种？

position:static|relative|absolute|fixted|

5.相对定位的元素有哪些特征？它的参考点是谁？

在标准文档流下的盒子设置相对定位的元素，与普通盒子没有任何区别
2.top|bottom|left|right

参考点：以自身位置作为参考点
应用：1.微调元素  2.子绝父相定位布局

6.绝对定位的元素由哪些特征？它的参考点？

现象：
1.脱标
2.层级提高，压盖效果

参考点：
是否有非static定位的祖先盒子
若没有：则以body为参考点
若有：则以最近的祖先盒子为参考点

重要：子绝父相

7.“子绝父相”布局方案的好处

在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。