css定位布局,浮动布局,定位和浮动区别于应用场景

定位:

精准的让你把标签设置在页面指定位置上, 是前端中非常重要且常用的布局方式!
定位布局有四个属性:
1.static 静态定位, 默认值, 无任何效果
2.relative 相对定位
	特点: 不脱离文档流, 并且会保留其原始位置, 是相对其自身位置进行移动
3.absolute 绝对定位
	特点: 
	a.会脱离文档流, 所以不会为其保留位置
	b.默认位置移动参考浏览器窗口, 但是如果其父级也设置了非静态定位的其他定位值, 就会以父级为参考进行移动
	c.多个兄弟元素都发生绝对定位, 越晚写定位的层级越靠上
4.fixed 固定定位
	特点:
	a.会脱离文档流, 所以不会为其保留位置
	b.以浏览器窗口为参考进行位置移动, 并且不会随着页面滚动而滚动
以上所有的定位属性需要搭配方位值才能更灵活
	left top right bottom
	可以通过z-index: 数值; 属性来调整定位的层级
	值越大, 层级越靠上
	注意, 定位属性不会影响盒模型大小

浮动:

1.浮动的标签会脱离文档流, 造成文字的塌陷,标签浮动了以后, 会使其对下面的兄弟标签向上排布, 不会对其上面的兄弟标签造成影响
float: left; float: right;
2.在标签中设置float: both; 可以解决兄弟浮动造成的影响
3.浮动, 主要是为了解决标签平铺问题

解决父子浮动问题:

/*(完美方法)--手动添加一个空的after属性, 放在浮动末尾, 
替代把最后一个元素clear: both, 类似于加一个换行(空的元素display: block;)*/
#box:after {
content: "";
display: block;
clear: both;

定位和浮动的区别应用场景:

浮动--解决平铺问题
定位--解决重合问题