自学笔记整理浮动定位篇

三、浮动与定位
1.理解文档流
脱离文档流：通俗的理解就是不占空间，可以和其他元素重叠，不再占用父元素的任何空间
不脱离文档流：占用空间。
相对定位：postion：relative 根据自己本身的位置进行偏移
绝对定位：postion：absolute 根据父元素，当没有父元素时，就根据根元素进行定位
固定定位：fixed

1）浮动
浮动的特点：浮动元素脱离了标准的文档流，不再占用父元素的任何空间。
浮动元素比标准文档流的元素层级要高，会将标准文档流的元素遮挡住。
浮动元素会向左浮动或向右浮动。浮动元素会遇到父元素的边缘就停止了浮动。
浮动元素会遇到已经有了浮动的元素，后者会浮动到前者之后就停止了浮动。
浮动元素浮动之后就脱离了父元素，并且父元素不再包裹浮动的元素。
行内元素设置为浮动，就拥有了块级元素的特点。
浮动的产生：float
清除浮动的方式： 1.clear标签
原理： 添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
优点： 简单、代码少、浏览器支持好、不容易出现怪问题
缺点： 不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，不利于页面的优化。
2.父元素添加overflow属性
原理：给父元素添加一句"overflow:hidden"，就能让父元素包住这个脱离了文档流的浮动元素，换句话说，"overflow:hidden"可以清除包含块内子元素的浮动的影响。
优点： 简单、代码少、浏览器支持好
缺点： 不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）
3.before、after伪元素
原理： 元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点： 浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用；（小编大力推荐使用此种方法，简单便捷，只需添加一个class即可解决问题）
缺点： css代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
4.height 如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点： 简单、代码少、容易掌握。
缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。

2）定位
元素分为块级元素、 行内元素
行内元素；水平居中 text-alien：center
水平居中 line-height：容器高度
块级元素；水平居中 marge：0 auto 相当于margin-top：0px,margin-bottom：0px;左右都为auto
上下左右都居中1）display：flex；
justify-content；
alien-items：center；
2）父元素设置相对定位；
子元素设置绝对定位并且设置left、right、top、bottom都为0，margin auto；

小知识点
height：100%与height：inherit的区别
大多数时候没啥区别，当使用绝对定位时，height：100%的子元素的高度计算为content+padding。
height：inherit子元素的高度计算为border-box的高度。能更好的适应！