浮动定位 float|position

一、浮动：float
​对应值：left right none

二、浮动的原理
​1.浮动元素将脱离标准文档流，浮动元素后面的元素依次向上填充

2.浮动元素不会覆盖行内元素

3.浮动元素变为​​行内块级元素，内容有多宽整体盒子就有多宽

三、文档流：网页中元素的排列顺序
​1.标准文档流（默认）：从左到右，从上到下排列

2.浮动流：

左浮：先从左到右，在从上到下排列

右浮：先从右到左，在从上到下排列

如果一行内容已满，则换行显示

四、浮动带来的问题
导致父盒子塌陷

五、如何解决父盒子塌陷（扩展盒子高度|清除浮动的影响）
1.清除浮动的影响：overflow

对应值：

        visible（默认值）
        hidden（超出隐藏）——扩展：text-overflow:ellipsis，超出部分以省略号显示

        scorll，滚动条

2.清除浮动：clear 写在父级元素的最后

对应值：

        left
        right

        both（左右两边谁最高就以谁为准）

overflow与clear的区别：

（1）overfloe添加在父级上，绝对定位不能实现清除浮动（vixible值没有这个功能）

（2）clear属性应用在浮动元素后面，clear会添加一个新标签

3.给父盒子设置高度

4.父级元素与子元素一起浮动（不推荐使用）

5.使用after伪类

六、伪类选择器
概念：

1伪类相当于一个类

2.伪元素相当于一个元素

a标签的四个伪类：

1.a:link，未点击时

2.a:visited，已点击

3.a:hover，悬停

4.a:active，激活状态

hover active，是所有元素都具有的伪类

定位:position

定位可多层叠加
对应值：
1.static：没有定位（默认值）
2.relative：相对定位
原理：无论是标准元素还是浮动元素，相对于它没有定位前的位置进行偏移
top和bottom 和right各自 都只能设置一个的值
设置定位后，不会脱离标准文档流
3.absolute：绝对定位
原理：_如果有已经定位的祖先元素， 就以最近的祖先元素为准;没有定位的祖先元素时，以页面的可视内容为准进行设置
top和bottom 和right各自 都只能设置一个的值
设置定位后，会脱离标准文档流 ，变为行内块级元素
4.fixed：固定定位
原理：相对于浏览器窗口进行设置
设置定位后，会脱离标准文档流 ，变为行内块级元素

z-index: n指定层叠顺序
设定优先级，值越大优先级越高，显
示在最上层
值: -1~999
默认值为auto (如果父
元素有z-index就和父元素-致，否
则为0)
必须与position结合使用