文档流

文档流是布局中一个非常重要的概念，先了解文档流，再了解布局。

什么是文档流：将窗体自上而下分成若干行,并在每行中按从左至右的依次排放元素,即为文档流

在常规情况下，文档流总是从左向右从上到下的顺序依次排列。
前面的盒模型中，说到，display:block 块元素，会在前后插入换行符。这也就导致了，页面总是一行一行的排列。假如我们需要更自由的布局方式呢？这时候就需要脱离文档流了。脱离文档流本质上是以独立块元素的形式浮动在文档中。本身不占据文档空间。

补：BFC （BLOCK FORMATTER CONTEXT ）针对块级元素排版时，使用块级格式化上下文。默认情况下只有一个body。但是，当脱离文档流后，脱离的元素被添加了独立的块级格式化上下文，类似iframe一样。独立又共生。

以下是脱离文档流的办法。

• 浮动 float

在知晓display:inline-block时，最常见的菜单栏就是使用float 。
浮动元素有几个特点，

• 浮动元素不占据文档流，但是显示方式还是按照文档流的展示。
  这里意思就是说，虽然在在本质上，浮动元素已经脱离文档流了，但是在展示的时候，还是会占据文档流的内容空间。其实这点不是很好理解。
  原因是，浮动元素是以行内块元素展示，并且不受display属性影响【除了none】，但是文档上又不占据父元素空间，因此会看到子元素浮动后父元素坍塌，高度为0的情况。所以，这叫文档流上不占据空间，但是占用行内元素空间。
• 浮动元素占据其前后行内元素的空间
  假设浮动元素的前一个元素是一个行内元素，浮动元素就会侵占行内的空间，尽可能的靠近父元素文档开始的位置。如果之后的元素在宽度上满足不了，将会被挤出父元素框，在浮动元素下方重新排列。
• 浮动后面元素可以接浮动元素
  这句话就不用解释了，因为是行内元素的展示方式，因此，同一父级下依次按照浮动要求排列

既然有了这个浮动，但是父级没了高度，更多时候我们不想失去父级的高度和样式，因此需要让浮动元素在文档流上回归。这也就有了清除浮动影响的clear属性

clear清除浮动的影响方式有几种 left，right，both。禁止左侧继续浮动

1. 利用浮动元素后一个兄弟元素清除浮动影响。

<div style="background:red"> 
  <div style="float:left"> left </div>
  <div style="float:right">right</div>
  <div style = "clear:both"></div>
</div>

原理就是，标识当前元素前后都不能有浮动元素，因此，遇到浮动元素将会换行，此时父元素被子元素撑开，直到满足条件。这样也就可以让父元素包裹住浮动元素的高度了。

2. 伪元素 ::after
   实际上和子元素clear是类似操作，
   创建一个不可见块元素，然后清除浮动影响，因为只有块元素才可以撑开父元素。

<style>
.clear::after{
  content:"";
  display:inline-block;
  visibility:hidden;
  height:0;
  width:0;
  clear:both;
}
.clear { 
  zoom:1;
}
</style>
<div class="clear"> 
  <div style="float:left"> left </div>
  <div style="float:right">right</div>
</div>

这里有一个zoom:1，是因为IE下清除浮动影响后，父元素并不会重新渲染，导致高度覆盖不正确，使用zoom:1重新渲染，使其正确显示。

3. 溢出清理，overflow
   无论是overflow:hidden还是overflow:auto。都有一个隐式的高度自适应。
   首先用hidden来看，因为hidden是作用在固定高度下的，在未设置元素高度的情况下，hidden会尽可能的包裹content，auto也是一样。因此，尽管文档流上脱离了，但是在布局上还是占据content空间，因此，hidden会将float占据的content内容包裹住。所以就自行设定了高度覆盖。
   但是，此时父容器的显示高度完全依赖浮动元素。子元素的高度只能撑开文档高度。

4. 不太有用的方式
   4.1 定义父级的height。所谓上面的清理，本质上就是撑开父容器的高度，覆盖浮动元素。因此如果在知道布局的情况下，可以用固定高度来设置。
   4.2 设置父级为浮动。 这个方法，等于白说。虽然包裹住了子元素，但是父元素本身也浮动了。

• 绝对定位 position:absolute

相对于父元素绝对定位不如说相对于父级的position非static下的绝对定位。比如 relative，absolute
在非static模式下，元素将开启堆叠模式(z-index)。此时，如果我们需要调整位置，则需要调整left top right bottom属性。

• position:fixed

相对absolute来说，fixed也是绝对定位，其定位参照是浏览器窗体。最常见的就是浮动菜单。不管页面如何变化，菜单相对浏览器窗体位置是不变的。 同时，位置修整也是和absolute一样。

z-index

这里稍微说一下这个属性。当开启堆叠模式后，如果定位的父元素没有设定z-index值或者auto。当子元素的z-index为负值时，将会优先绘制子元素。因此会出现子元素在父元素下面的情形。

影响层叠关系的其他因素

• opacity 当为父级设定小于1的opacity时，将产生一个层叠包裹，使得父级也受到堆叠影响。
• transforms, filters, css-regions, paged media
  这里感谢 : 没人告诉你关于z-index的一些事 © w3cplus.com

补：层叠顺序 stacking level
1、形成堆叠上下文环境的元素的背景与边框
2、拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
3、正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
4、无 position 定位（static除外）的 float 浮动元素
5、正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6、拥有 z-index:0 的子堆叠上下文元素
7、拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）