html布局流

相对定位 position:relative

    故名思意，相对定位就应该是相对于一个东西来定位，而这个东西是什么呢？其实这个东西不是什么，就是元素自己本身，用left right top b0ttom进行定位后，元素会根据原来的位置进行移动，但由于position:relative这个属性并没有脱离文档流的，所以元素本身所占的位置会保留。

 

我们给div2加position:relative 并用top:-20px;left:50px进行相对移动

<div style=" width:100px; height:100px;">div1</div>
<div style=" width:100px; height:100px; position:relative; top:-20px; left:50px;">div2</div>
<div style=" width:100px; height:100px;">div3</div>

我们看到，div3并没有因为div2的上移而上移了，原因就是position:relative这个属性是没有脱离文档流的，所以元素本身所占的位置会保留。

绝对定位 position:absolute

    所谓绝对定位，其实也要找个东西来相对来绝对的，而这个东西就是元素的第一个有position，且positon不能为static的祖先元素，是不是有点拗口，换个说法吧，就是这个小鬼（element）的定位可以是他的老爸，他的爷爷，他的太公....（祖先要素）中而且第一个是是有钱的（position:absolute）或者是当官的（position:relative），就是不能是个程序猿（position:static 或者没有设position）的。而且值得注意的是position:absolute这个属性是脱离文档流的，所以重新定位后元素是不会占着原来的位置的

浮动：float

• l float : left 或float : right –- 将元素从原来的占位中删除，向左或向右漂浮，直到碰到包含块的边框，或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素，定位后该元素将以块级元素的形式显示。

注：只有在position为static或relative，或继承了父元素的static或relative时，浮动才生效。

浮动场景：

• 浮动框总体宽度超过容器：浮动框块下移，直到有足够的空间

• 各浮动框高度不同：下移的浮动框有可能被“卡住”

普通流normal flow

将窗体自上而下分成一行一行,块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。
了解文档流是css布局的基础。虽然 普通流 很基础， 但资料较少，之前对这个概念模糊，现总结如下，欢迎拍。

块级元素和内联元素

html元素根据普通流布局特性分为块级元素（block）和内联元素（inline）

块级元素

表现为以下特性：

• 处于常规流中时，如果 width 没有设置，会自动填充满父容器;
• 可以应用 margin/padding;
• 在没有设置高度的情况下会扩展高度以包含常规流中的子元素;
• 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）;
• 忽略 vertical-align.

常见的块级元素

块级元素： p、h1、div、 ul、ol、li、 table、 form
display为block的元素

BFC

说到普通流块的布局，不得不说BFC了，
关于BFC这篇文章（ http://www.w3ctech.com/topic/865 ）解释的很清楚了。
BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

哪些元素会产生BFC

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

内联元素

内联元素,表现为行内样式,当当前行放不下的时候,再另起新行.表现为以下特性：

• 水平方向上根据 direction 依次布局;
• 不会在元素前后进行换行;
• 受 white-space 控制;
• margin/padding 在竖直方向上无效，水平方向上有效;
• width/height 属性对非替换行内元素无效，宽度由元素内容决定;
• 非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高;由 height , margin , padding , border 决定;
• 浮动或绝对定位时会转换为 block;
• vertical-align 属性生效

常见的内联元素

input、 a、 img、 span
display为inline的元素

IFC

同样相对BFC,行内元素有IFC

IFC布局规则

1. 框会从包含块的顶部开始，一个接一个地水平摆放。
2. 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
3. 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

详细可查看：inline-formatting: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

哪些情况会脱离普通流

有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位,隐藏元素。

固定定位（fixed）

固定定位：即完全离开文档流，相关于视区进行偏移。
对于定位要注意：

• 对于absolute和fixed定位的固定尺寸（设置了width和height属性值）元素，如果设置了top和left属性，那么设置bottom和right值就没有作用了，应该是top和left优先级高，否则同时写了浏览器怎么知道按照谁定位
• 对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后margin属性也就不起作用了
• 对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后float属性同样会失效
  块元素如果设置了float属性或者是absolute、fixed定位，那么vertical-align属性不再起作用