CSS_浮动以及定位

CSS浮动以及定位

普通流 浮动 定位
普通流:正常排列
浮动:浮动改变标签的默认排列方式

一.浮动

语法:float:left right 创建浮动框将其移动到一边，
直到左边缘或者右边缘及包含块或者浮动框边缘
浮动特性
1.脱离标准流:脱离标准流 移动到左右的指定位置，不保留原来的位置，即脱离文档流
2.浮动元素会一行内显示并且元素顶部对齐，一行内显示不下则会移动到第二行
3.浮动元素具有行内块元素的特性，行内元素有浮动不需要转换为行内块和块
4.浮动经常与标准流父亲搭配使用，父元素管上下 子元素管左右
5.浮动只会影响后面的元素

二.清除浮动

清除浮动:
		作用:清除浮动导致的元素塌陷...
		采取策略闭合浮动
	1.额外标签法:
		浮动元素后面添加一个新块级标签并添加clear:both

clear:both

	 2.父级添加overflow 触发BFC
	 	给父元素添加 overflow hidden auto scroll

overflow:hidden auto scroll

	 3.父级添加after伪元素
	 	给父标签添加::after 添加content:'' display:block height:0 clear:both visibility:hidden

content:''
display:block 
height:0 
clear:both 
visibility:hidden

	4.父级添加双伪元素
		双伪元素添加 前后都插入一个伪元素 content: '' display:table  after:clear:both

三.定位

在一个盒子自由移动位置或固定到中间屏幕某个位置 布局使用
定位模式 + 边偏移
语法:positon:static relative相对 absolute绝对 fixed固定
relative:相对
	相对于自身的位置进行移动,位置保留

abosolute:绝对
	相对于有定位祖先元素移动位置
	没有祖先元素或者祖先元素没有定位 以浏览器为准标准
	祖先元素有定位（相绝固） 按最近一级的祖先元素进行定位
	绝对定位脱离标准流
	子绝父相,父亲保留位置，子盒子不需要保留位置
	子绝对定位，不占有位置，可以放到父盒子的任意一个地方
	父盒子需要加定位限制子盒子在父盒子内显示
	父盒子布局时，需要占有位置，因此父亲只能相对定位
	
fixed:固定定位:
	以浏览器的可视窗口为参照点移动
	和父亲没关系 与浏览器滚动条无关
	不占有原有位置,固定版心的右边进行定位
	中心:先让盒子left:50% 然后让其在用margin-left版心宽度一半距离
sticky:粘性定位
	按可视窗口移动,占有原先位置,必须添加偏移


边偏移:定位相对于父级元素移动的距离
	top bottom left right
	
z-index:数值越大 盒子越靠上

四.定位特性

	行内元素添加定位后就可以设置宽高
	块级元素添加定位，默认宽高是元素
	脱标盒子不会触发外边距塌陷
	绝对定位（固定）会完全压住盒子已经文字和图片
	浮动元素只会压住下面盒子，不会压住文字和图片

五.元素的显示与隐藏

display visibility overflow
display:none隐藏 block(显示) 隐藏后原来的位置也没了
visibility visible元素可见的 hidden元素隐藏 依旧占有原来位置
overflow溢出部分进行显示隐藏 visible显示 hidden隐藏
scroll溢出部分显示滚动条 overflow：auto 在需要的时候添加滚动条