green;float:
right;">right
截图：
依照标准来说，应该按照上图的方式放置right这个浮动元素。
但是，只有Firefox/Chrome/Safari/Opera/IE8（S）是这样的，在IE6/IE7/IE8（Q）中，是这样的：
看来，这条规则，IE遵守的不好啊……
大家注意这个兼容性问题。
8.左浮动框左边如果有另外一个左浮动框，它的右外边不可以出现在它包含块的右边之右。
（或者比较宽松的要求是：
一个左浮动不可以超出右边，除非它已经尽可能地靠左排列。
）对于向右浮动的元素也有类似的规则。
此条规则也是限定浮动元素的位置范围，不可超出包含块。
9.浮动框要放置得尽可能的高。
在符合所有规则的情况下，尽可能的向上放，注意6、7两条关于其顶边的规则。
10.左浮动框必须尽量靠左放置，右浮动框必须尽量靠右放置。
在更高的位置和更靠左或靠右的位置间，选择前者。
和第9条，可以算是浮动的大规则吧，尽量的向上向左/右放。
这几条规则中说到的其他元素，都和浮动元素处于相同的blockformattingcontext中。
总结
可见，浮动的规则却是很让人迷惑，但从这几条规则中你也不难发现，浮动的宗旨是，在不溢出包含块的情况下，尽量的靠上靠左/右放置，但是不能高于它前面生成的块框、浮动框和行框的顶。
十：
控制紧接浮动的排列-clear特性
向前两个帖子，都是讲的伟大的浮动：
它带给我们一个不属于常规流的世界，它不能超出它的包含块，它的位置跟在它之前的元素生成的框有关系（详见前面的浮动规则）……那么，它对处于它后面的元素有什么关系呢？
对于块框，会认为它不存在，行框会绕着它排列！
有没有方法使块框也可以在它后面排列，而不再当它不存在呢？
答案是肯定的。
W3C总是透着一种非常人性化的味道。
clear特性就是做的这件事。
我感觉，clear是对浮动框和常规流中框的一种关系上的平衡。
'clear'特性
该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。
’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Blockformattingcontext中的浮动元素。
对于插入框，该属性适用于插入框所属的最后的块框。
间隙（Clearance）以元素margintop上方空白的方式被引入。
它用来把元素垂直（典型情况是向下）推过浮动框。
它是一个值。
clear特性值的作用
left/right/both：
生成框的间隙，是指设置足够的（空白区），以使元素的顶边框边界（topborderedge）放置到由源文档中较早元素生成的任何左浮动框/右浮动框/左右浮动框的底外边（bottomouteredge，即底margin边）之下。
none：
对考虑到浮动后的框的位置没有约束。
简单点儿说，就是设置了clear的元素的topborderedge要放在相关的浮动元素的bottommarginedge之下。
注意这两种元素接触边界的区别。
一个是borer，一个是margin。
一个直观的例子：
HTMLcode
300px;height:
100px;background-color:
green;float:
left;border:
5pxsolidred;">
float
left;width:
300px;height:
50px;background-color:
green;border:
5pxsolidyellow;margin-top:
50px;">
clearance
在浏览器里测试之，截图：
设置了clear的元素的margin-top是50px，没起作用，为什么呢？
注意，应该是设置了clear的元素的topborderedge，不是marginedge。
如果想让它们之间有50px的间距，怎么办？
看修改过的代码：
HTMLcode
300px;height:
100px;background-color:
green;float:
left;border:
5pxsolidred;margin-bottom:
50px;">
float
left;width:
300px;height:
50px;background-color:
green;border:
5pxsolidyellow;">
clearance
运行截图：
这点，各位童鞋还需注意。
浮动元素上的clear
为clear特性被赋予浮动元素时，它将导致浮动框定位规则的修正，另外一条限制（第10条）被追加：
浮动框区的上外边界（topmarginedge）必须低于前面所有左浮框的下外边界（在clear:
left时），或者右浮框区（clear:
right），或者两个框区（clear:
both）。
例子：
HTMLcode
300px;height:
100px;border:
1pxsolidgold;">
right;width:
150px;height:
50px;background-color:
green;">float:
right;
left;width:
100px;height:
50px;background-color:
red;clear:
right;">clear:
rightfloat:
left;
应该是这种效果：
但是，在IE6、IE7和IE8（Q）中，这个规则没有被遵守：
请大家注意这个兼容性问题。
尽量少在浮动元素上设置clear属性。
十一：
绝对定位
在前面的帖子中，我们已经讲了可视化模型中布局的两大方面：
1.常规流2.浮动，布局3大部分只剩下了绝对定位。
前面的帖子中也零星的提到过关于绝对定位的某些特性，但都不够细致系统。
绝对定位（Absolutepositioning）
相对包含块偏移定位
在绝对定位模型中，一个框明确地基于它的包含块偏移。
不是父元素，这点需注意。
要是人家问你，绝对定位相对于谁定位啊？
你很快乐的说：
它的父元素。
那就显得矬了--!
专业的说法，相对于包含快定位。
所以，绝对定位元素的定位，关键是包含块，什么是包含块？
见：
【分享】说说标准——CSS核心可视化格式模型（visualformattingmodel）之一：
包含块（containingblock）
完全脱离常规流
它完全脱离了常规流（对后继的兄弟节点没有影响）。
这一点又与浮动元素不同，好歹浮动元素会对后继的行框产生影响，而且，后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。
可以这么理解，常规流中的元素，都在同一个层上，浮动是处于常规流之上的一个特殊层，可能会对常规流中的元素有影响。
但是绝对定位的元素不会，可以把每个绝对定位的框看做一个单独的图层，独来独往。
所以，说它完全脱离了常规流也不无道理。
注意一点，绝对元素定位的top和left值跟绝对元素未脱离常规流之前在常规流中位置有关。
看这个例子：
HTMLcode
absolute;width:
100px;height:
100px;background-color:
red;">
absolute
50px;border:
1pxsolidblue;width:
200px;">DIV中的普通文本元素
absolute;left:
60px;width:
100px;height:
100px;background-color:
green;">
absolute
以上例子中，两个绝对定位元素都未声明其top特性，那么top就会取它在常规流中的位置（后面会讲到）。
中间的DIV在常规流中，影响了后面的绝对定位元素的位置，但是没有受到前面的绝对定位元素的影响。
实际截图：
绝对定位元素生成的包含块
一个绝对定位框会为它的常规流子元素和定位派生元素（不包含fiexed定位的元素）生成一个新的包含块。
不过，绝对定位元素的内容不会在其它框的周围排列。
至于，为何只为常规流中的子元素还有绝对定位元素生成包含块，就不大了解了……有知道的么？
分享一下……
注意，绝对定位框还会创建blockformattingcontexts。
在IE中则会触发hasLayout。
堆叠层次
它们可能会掩盖另一个框的内容，或者被另外一个框掩盖，这取决于互相重合的框的堆叠层次。
也就是我们前面说的三维的可视化模型，除了X轴，Y轴，还有Z轴。
固定定位（Fixedpositioning）
固定定位是绝对定位的一个子类。
唯一的区别是，对于固定定位框，它的包含块由可是窗口（viewport）创建。
对于连续媒介，固定定位框并不随着文档的滚动而移动。
从这个意义上说，它们类似于固定的背景图形。
对于页面媒介，固定定位框在每页里重复。
对于需要在每一页底部放置一个签名时，这个方法非常有用。
注意，在IE6里不支持Fixed定位，通常的做法是使用绝对定位，然后用JS控制绝对定位框的位置，来代替固定定位。
W3C官方给出一个使用固定定位布局的例子，为了看起来明显，我给所有的div加了个红色的边框，各位可以自行测试：
HTMLcode
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0//EN">
AframedocumentwithCSS2
BODY{
height:
8.5in
}
div{
border:
1pxsolidred;
}
/*Requiredforpercentageheightsbelow*/
#header{
position:
fixed;
width:
100%;
height:
15%;
top:
0;
right:
0;
bottom:
auto;
left:
0;
}
#sidebar{
position:
fixed;
width:
10em;
height:
auto;
top:
15%;
right:
auto;
bottom:
100px;
left:
0;
}
#main{
position:
fixed;
width:
auto;
height:
auto;
top:
15%;
right:
0;
bottom:
100px;
left:
10em;
}
#footer{
position:
fixed;
width:
100%;
height:
100px;
top:
auto;
right:
0;
bottom:
0;
left:
0;
}
...
...
...
...
效果应该是（来自W3C）：
十二、'display'，'position'和
展开阅读全文
相关搜索
升级会员 