关于float，position几个属性值的理解

什么是浮动？

float 属性定义元素在哪个方向浮动。主要作用是文本环绕图像，不过在 CSS 中，任何元素都可以浮动。元素设置 了float值，且float值不为none，则浮动元素变成一个块级框，自动增加display：block属性，而不论它本身是何种元素。
特点：
1. float设置的浮动元素对块级元素不可见，会覆盖掉浮动元素，对文本元素和bfc元素可见。（BFC为块级格式上下文）。
2. 浮动元素增加display:block;属性。
3. 浮动元素是脱离文档流的。（下文说明什么是脱离文档流）
position属性常用的有5个值

1. absolute 绝对对位，相对于最近定位父级进行定位， 脱离文档流
2. relative 相对定位，相对于自身原本文档流中的位置定位，relative 不脱离文档流
3. fixed 固定位置，相对为浏览器窗口的位置，一般用来做广告弹出。是脱离文档流的
4. static 出现在正常流中
5. inherit 继承定位

什么是BFC，作用是什么？
1. BFC 块级格式上下文，浮动元素和绝对定位元素，非块级盒子的块级容器。
2. 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
特点：

• 内部的Box会在垂直方向上一个接一个的放置。
• 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之Block元素会扩展到与父元素同宽，所以block元素会垂直排列
• 垂直方向上的两个相邻DIV的margin会重叠。
• 浮动元素会尽量接近往左上方（或右上方）
• 为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素

产生条件
1).float的值不是none。
2)、position的值不是static或者relative。
3)、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4)、overflow的值不是visible,
作用
1).阻止垂直外边距（margin-top、margin-bottom）折叠
2).包含浮动元素 与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖,可以实现左右固定宽度 中间自适应。 左右模块设置浮动，中间元素设置overflow：hidden
总结一句话：就是垂直方向上的margin会重合，可以包含浮动的元素，

脱离文档流则是不按照正常的文档流中自上而下从左到右的显示，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
a. 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
b. 使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
脱离文档流的好处：
1. 很好的减少回流和重绘，元素脱离文档流时，修改元素的大小颜色时不会影响文档流中的其他元素。（修改正常文档流中元素的尺寸位置会引起回流，回流一定伴随着重绘，修改元素的颜色会引起重绘，重绘不一定引起回流，减少回流、重绘进而来优化页面渲染的性能）找了半天的优点，发现并没有关于这个问题的回答。后续找到了再补上吧。
当然这里又引出了一个问题：float元素撑不开父级的情况
解决方法有以下四种：
1.新增元素设置为clear：both；
2.增加伪元素 ::befor{clear:both;display:block;content:""} ；
3.父级手动设置高度；
4.设置父元素为overflow：hidden或者display:flex;