（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1. display，position，float 之间的关系
这三个属性均会影响盒的生成及布局，它们的交互如下：
如果 display 值为 none ，那么 position 和 float 不生效。这种情况下，元素不生成盒。
否则，如果 position 值为 absolute 或 fixed ，盒为绝对定位absolutely positioned， float 的计算值为 none ， display 的设置如下表。盒的位置由 top 、 right 、 bottom 和 left 属性以及盒的包含块决定。
否则，如果 float 值不为 none ，盒浮动并且 display 的设置如下表。
否则，如果元素为根元素， display 设置如下表，除了其在CSS2.2中未定义 list-item 的指定值是否变为计算值 block 或 list-item 。
否则， dislay 属性值使用指定值。
2. 标准流 normal flow，浮动 floats 和绝对定位 absolute positioning 的比较
为了说明标准流，相对定位，浮动和绝对定位之间的区别，我们提供了一系列基于以下HTML的示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id="outer"> Start of outer contents.
<SPAN id="inner"> Inner contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>
该文档中假设有如下规则：
body {
display: block;
font-size: 12px;
line-height: 200%;
width: 400px;
height: 400px
}
p {
display: block
}
span {
display: inline
}
在每个示例中，外部和内部元素生成的框的最终位置有所不同。在每个插图中，插图左边的数字表示标准流位置中的双倍行距（为了清晰）。
注：下述图表仅供参考，并不按比例显示。它们旨在突出CSS 2.2中各种定位方案之间的差异，而不是作为给定示例的参考渲染。
2.1 标准流 normal flow
考虑以下对outer和inner的CSS声明，这些声明不会改变盒的标准流：
#outer { color: red }
#inner { color: blue }
P元素包含所有行内内容： 匿名行内文本anonymous inline text
和两个SPAN元素。因此，所有的内容将被放置在一个IFC中，处于由P元素建立的包含块内，产生类似如下内容：
2.2 相对定位 relative positioning
为了查看相对定位的效果，我们指定：
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
文本正常流向outer元素。然后， outer的文本将流入其标准流内位置并在第一行末尾被分割。然后，包含文本（分布于三行）的这些行盒会整体位移“-12px”（向上移动）。
作为outer子元素inner的内容，会在标准流中紧接"of outer contents"单词（在1.5行）流入。然而，inner内容本身相对于outer内容偏移'12px'（向下），回到它们在第2行的原始位置。
请注意，跟在outer元素之后的内容不受outer相对定位的影响。
另外要注意，outer偏移量若为'-24px'，outer文本会和body文本产生重叠。
现在考虑通过如下规则将inner元素的文本浮动到右边：
#outer { color: red }
#inner { float: right; width: 130px; color: blue }
inner盒脱离标准流向右浮动到right margins（盒的宽度已经显示指定），文本正常流向inner盒。inner盒左侧的行盒均被缩短，文档中剩余的文本会流入它们。
为了展示'clear'属性的效果，我们在示例中添加了一个兄弟元素：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes II</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id=outer> Start of outer contents.
<SPAN id=inner> Inner contents.</SPAN>
<SPAN id=sibling> Sibling contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>
带有如下规则：
#inner { float: right; width: 130px; color: blue }
#sibling { color: red }
导致inner盒像之前一样向右浮动，并且文档中的剩余文本流入空出的空间：
但是，如果兄弟元素的clear属性设置为'right'（即，生成的兄弟盒不会接受处于 其右侧还紧邻一个浮动盒 的位置），那么兄弟内容会在float之下开始流动：
#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
2.3 绝对定位 absolute positioning
最后，我们考虑绝对定位的影响。考虑以下用于outer和 inner的CSS声明：
#outer {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }
这会导致outer盒的top相对于其包含块containing block定位。定位盒的包含块由最近的定位祖先positioned ancestor（或者，如果不存在，使用初始包含块，正如本例中所示）。outer盒的top side在其包含块的top之下200px，left side在其包含块的left之右200px。outer的子盒相对于其父级以标准方式流动。
下面的示例显示一个绝对定位盒是一个相对定位盒的孩子。尽管父亲outer盒实际上并没有偏移，但将其“position”属性设置为“relative”表示该盒可以用作定位后代的包含块。由于outer盒是一个行内盒，被分割到多行，第一个行内盒的top edge 和 left edge（由下图中的粗虚线表示）作为“top”和“left”偏移的参考。
#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
结果如下所示：
如果不对outer盒进行定位：
#outer { color: red }
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
inner的包含块将是初始包含块initial containing block（见示例）。下图显示了此种情况下inner盒的位置。
如下例所示，可以使用相对定位和绝对定位来实现更改条。
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>
可能会有如下结果：
首先，该段落（其包含块边在图中显示）正常流动。然后它从包含块的left margin向右偏移了'10px'（因此，为该偏移量预留了'10px'的margin）。作为变化条的两个连字符脱离标准流并位于当前行（由于'top：auto'），从其包含块（由P在其最终位置建立）的左边缘开始右移'-1em'。结果是变化条似乎“浮动”到当前行的左侧。
参考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
CSS规范 > 9 视觉格式化模型 Visual Formatting Model
