关于浮动元素与定位元素的理解

一、浮动元素：
设置浮动后的浮动元素属于半脱离文档流的元素，在浮动元素后加上的元素 将会在浮动元素同一行追加，当父级元素宽度不够是 将会在下一行显示。
二、解决浮动的问题：
1.给父级加上高度
当子元素设置浮动后 讲无法撑开父级高度的情况。
2、给父级加上overflow:hidden 缺点 二级菜单无法实现
1.解决元素浮动后 无法撑开父级高度的情况
2.解决margin塌陷的问题
3、给父元素加上浮动 缺点 会将浮动问题向上传递 最终结束于html标签位置 html标签没有margin 塌陷 和无法撑开高度的情况
4、在元素后面加上一个div并给div设置clear:both 缺点结构冗余
5、给元素加上定位 缺点 ：元素飘出文档
6、在元素后面加上伪元素
.cl:after{
content: “”;
clear: both;
height: 0;
display: block;
overflow: hidden;
visibility: hidden;
}
7、给元素加上inline-block 缺点 行级块元素的缺点等
定位元素：
position：absolute
1.完全脱离文档流
2.定位是相对于最近有定位的父级进行定位
3 .在百分比进行定位时 父级都没有定位时 将相对于浏览器进行定位 百分比取浏览器的宽高
4.设置absolute之后将可以设置宽高 不设置宽高的情况下高度由内容撑开
position：fixed
1、无论什么情况 均相对于浏览器进行定位 并且父级设置overflow:hidden也对其无效
2、不设置宽高的情况下高度由内容撑开（由于完全脱离文档流 所以无法继承父级宽度）
position：relative
1、保留当前位置 并且相对于自身出生位置进行定位 偏移之后的不占位置
2、没有脱离文档流
3、在百分比定位时，父级都没有定位时 相对于body进行定位 宽为浏览器的宽 高度为0。（由于没有脱离文档流 继承父级宽度）