1.浮动元素带来的影响及解决
1.由于浮动元素脱离文档流，在文档中不占位，所以在父元素中也相当于不存在，
而父元素的高度是以未浮动元素的高度为准的的，所以一旦所有子元素浮动，会造成父元素高度塌陷。
2.解决方式：
1.针对父元素高度塌陷可以采用
1.直接给父元素设置高度
弊端：不一定每次都清楚的知道父元素的高度
2.给父元素设置浮动
弊端：影响后面其他元素的布局(不推荐)
3.直接给父元素添加overflow 为 hidden 或 auto
弊端：hidden 如果出现内容溢出，会被隐藏不显示
4.清除浮动带来的影响(标准)
1.属性 clear 在正常元素中使用
2.解决父元素高度塌陷，还可以解决浮动元遮挡正常元素的问题
3.取值：
1.none 默认不做任何处理
2.left 清除当前元素前面元素左浮动带来的影响，不会被前面左浮动的元素压在底下
3.right 清除当前元素前面元素右浮动带来的影响，不会被前面右浮动的元素压在底下
4.both 清除当前元素前面元素任何一种浮动方式带来的影响
4.解决父元素高度塌陷
在父元素中添加空的子元素，设置子元素清除浮动 clear:both
要求必须使用块元素做子元素
2.定位布局
1.属性 position
2,取值：
1.relative 相对定位
2.absolute 绝对定位
3.fixed 固定定位
4.static 静态布局(默认值)
3.偏移属性
作用：配合已定位元素实现位置移动
元素设置position属性为relative/absolue/fixed 都被称为已定位元素
属性：top/right/bottom/left
取值：像素值
top:以元素上边为基准进行偏移
right:以元素右边为基准进行偏移
bottom:以元素下边为基准进行偏移
left:以元素左边为基准进行偏移
4.相对定位
1.元素会相对于它在文档中的原来位置进行偏移
2.练习
创建一个页面
创建ul及四个列表项li
每个li 100*30,设置背景颜色，左浮动，10px的右外边距
使用相对定位实现:
当鼠标悬停在li上，li元素实现向左上偏移10px
3.元素使用相对定位进行偏移，在文档中始终占据原本的位置,一经偏移，会遮挡其他元素
5.绝对定位(重点)
1.特点：
1.元素使用绝对定位，会脱离文档流 ，在文档中不再占位
2.绝对定位的元素会参照距它最近的一个已经定位的祖先元素进行偏移
3.如果没有已经定位的祖先元素，元素会参照body进行定位
2.语法
属性 position
取值 absolute
配合偏移属性实现定位
3.注意：
1.由于绝对定位元素会脱离文档流，所以在使用绝对定位时，一般按照父元素相对定位，
子元素绝对定位的原则进行布局 --- 父相子绝
2.元素脱离文档流之后，都可以设置宽高(针对行内元素)
6.固定定位
1.元素一旦设置固定定位，会被固定在浏览器窗口的某个位置，不糊跟随网页滚动而发生位置的改变
2.语法
属性 position
取值 fixed
配合偏移属性进行定位布局
3.注意
1.固定定位的元素永远都是相对于body实现位置初始化
2.元素设置固定定位，就会变成块级元素
7.元素堆叠次序
1.已定位的元素们堆叠在一起的排列顺序
2.语法
属性 z-index
取值 数字，无单位，值越大，元素越靠上
3.注意：
1.只有已经定位的元素 position:
relative / absolute /
fixed,才能设置z-index,否则不起作用
2.父子元素之间，无论如何修改z-index，永远都是子元素在上，父元素在下
3.如果z-index取值相同，后来者居上
3.元素的隐藏与显示
1.元素的显示方式
1.元素以什么形式显示在页面中(行内/行内块/块)
2.语法:
display:none/inline/block/inline-block
取值：
1.none元素隐藏不显示，在文档中不占位
2.inline 显示为行内元素
3.block 显示为块元素
4.inline-block 显示为行内元素
行内块元素兼具行内元素与块元素的特征，既可以共行，也可以设置宽高 img input
2.元素显示效果
1.可见性设置
属性 visibility
取值：
1.visible 默认值 可见的
2.hidden 隐藏，元素隐藏仍然在文档中占位
对比 display : none 与 visibility : hidden
同样设置元素隐藏，前者不占位，后者依旧在文档中占位
2.透明度设置
属性 opacity 透明度
取值 0(完全透明)~1(不透明)
对比rgba()与opacity设置透明度，二者的区别:
rgba() 设置的半透明效果不会被子元素继承
opacity 设置的半透明效果会被子元素继承下来,如果子元素中也使用opacity设置了透明度，
最终子元素的透明度由两个值相乘得到
3.元素的垂直对齐方式
属性 vertical-align
取值 top / middle / bottom / baseline(默认值，基线对齐)
使用场景：
添加在行内块元素上 img input , 用来设置元素两端的文本与当前元素的对齐方式
3.光标外观
属性 cursor
取值
1.default
2.pointer 小手形状
3.text 显示为 I 样式