CSS视觉格式化模型，你真的了解么？( 四 ) _CSS

如果'left'值是'auto'，则其使用值是'right'属性值的负数(也就是框通过'right'值向左移动) 。
如果'right'的指定值为'auto'，则其使用值是'left'属性值的负数。
如果'left'或'right'的取值都不是'auto'，则对其位置的约束过多，因此要忽略其中的一个值。如果包含块的'direction'为'ltr'，则'left'胜出，而'right'值变为-'left'(left的负值) 。如果包含块的'direction'为'rtl'，则'right'胜出，而'left'值被忽略。
下面的三个规则是等价的:

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

'top'和'bottom'属性会在不改变其框尺寸的情况下上下移动相对定位元素。'Top'把框向上移动，'bottom'把框向下移动。因为框不会由于'top'或'bottom'值而被分割或被拉伸，其使用值总是:top=-bottom 。如果它们都是'auto'，则它们的使用值都为'0' 。如果它们中的一个是'auto'，则它成为另一个的负值。如果两者都不是'auto'，则'bottom'被忽略(也就是，bottom的使用值为'top'的负值) 。
浮动（Float）浮动的元素产生的盒为浮动盒（floating boxes）。
它不在常规流中，内容排列在沿着左浮动框的右边排列，而沿着右浮动框的左边排列，也就是我们常说的文字环绕效果。
如果存在一个行框，浮动盒的顶边会和当前行盒的顶部对齐。如果水平方向没有足够的空间放置浮动元素，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。
在块级格式化上下文中，浮动元素不会覆盖常规流中的元素，可以通过建立块级格式化上下文来闭合浮动。
绝对定位（Absolute positioning）绝对定位元素的position为absolute或fixed，元素形成的盒从常规流中移除，不影响常规流的布局。其定位相对于它的包含块（position不为static）和top，bottom，left和right 。
position为fixed的元素，其包含块是视口，当页面滚动时，它将固定在屏幕上。

【CSS视觉格式化模型，你真的了解么？】