【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性

WebAdvocate 2010-08-20 05:34:24
向前两个帖子,都是讲的伟大的浮动:它带给我们一个不属于常规流的世界,它不能超出它的包含块,它的位置跟在它之前的元素生成的框有关系(详见前面的浮动规则)…… 那么,它对处于它后面的元素有什么关系呢?对于块框,会认为它不存在,行框会绕着它排列!有没有方法使块框也可以在它后面排列,而不再当它不存在呢?答案是肯定的。W3C总是透着一种非常人性化的味道。clear 特性就是做的这件事。我感觉,clear 是对浮动框和常规流中框的一种关系上的平衡。

'clear'特性

该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatting context中的浮动元素。
对于插入框,该属性适用于插入框所属的最后的块框。
间隙(Clearance)以元素margin top上方空白的方式被引入。它用来把元素垂直(典型情况是向下)推过浮动框。它是一个值。

clear 特性值的作用

left/right/both:生成框的间隙,是指设置足够的(空白区),以使元素的顶边框边界(top border edge)放置到由源文档中较早元素生成的任何左浮动框/右浮动框/左右浮动框的底外边(bottom outer edge,即底margin边)之下。
none:对考虑到浮动后的框的位置没有约束。

简单点儿说,就是设置了clear的元素的 top border edge 要放在相关的浮动元素的 bottom margin edge 之下。注意这两种元素接触边界的区别。一个是borer,一个是margin。
一个直观的例子:
<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red;">
float
</div>
<div style="clear:left; width:300px; height:50px; background-color:green; border:5px solid yellow; margin-top:50px;">
clearance
</div>
在浏览器里测试之,截图:

设置了clear的元素的margin-top是50px,没起作用,为什么呢?注意,应该是设置了clear的元素的top border edge,不是margin edge。
如果想让它们之间有50px的间距,怎么办?
看修改过的代码:
<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red; margin-bottom:50px;">
float
</div>
<div style="clear:left; width:300px; height:50px; background-color:green; border:5px solid yellow;">
clearance
</div>
运行截图:

这点,各位童鞋还需注意。

浮动元素上的 clear

为 clear 特性被赋予浮动元素时,它将导致浮动框定位规则的修正,另外一条限制(第10条)被追加:
浮动框区的上外边界(top margin edge)必须低于前面所有左浮框的下外边界(在clear:left时),或者右浮框区(clear:right),或者两个框区(clear:both)。
例子:
<div id="Container" style="width:300px; height:100px; border:1px solid gold; ">
<div id="DIV1" style="float:right; width:150px; height: 50px; background-color:green; ">float:right;</div>
<div id="DIV2" style="float:left; width:100px; height: 50px; background-color:red; clear:right;">clear:right float:left;</div>
</div>
应该是这种效果:

但是,在IE6、IE7和IE8(Q)中,这个规则没有被遵守:

请大家注意这个兼容性问题。尽量少在浮动元素上设置clear属性。


可视化格式模型概述:
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196

更多说说标准系列:
【分享】说说标准系列目录
...全文
572 6 打赏 收藏 举报
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
peinikanyu 2011-10-16
牛啊~~~
  • 打赏
  • 举报
回复
alohau 2010-08-24
clear一直让人很烦恼,呵呵
没想到,连标准也说的很烦恼。又是比较抽象的概念。
clear 那片空白到底是什么东西呢?不解
  • 打赏
  • 举报
回复
tizll521 2010-08-24
你的第一个例子在IE6、IE7和IE8(Q)中 margin-top:50px;是有效果的 这也算是IE的不同吧 没有遵守标准
  • 打赏
  • 举报
回复
xupeihuagudulei 2010-08-22
  • 打赏
  • 举报
回复
一见楼主的帖子,就有接分的心情
  • 打赏
  • 举报
回复
挨踢直男 2010-08-20
  • 打赏
  • 举报
回复
相关推荐
发帖
跨浏览器开发

5005

社区成员

解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
帖子事件
创建了帖子
2010-08-20 05:34
社区公告
暂无公告