你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

可视化格式模型-clear特性

行为 练习 17813浏览 6评论

‘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。
一个直观的例子:

提示:你可以先修改部分代码再运行。

设置了clear的元素的margin-top是50px,没起作用,为什么呢?注意,应该是设置了clear的元素的top border edge,不是margin edge。
如果想让它们之间有50px的间距,怎么办?
看修改过的代码:

提示:你可以先修改部分代码再运行。

浮动元素上的 clear

为 clear 特性被赋予浮动元素时,它将导致浮动框定位规则的修正,另外一条限制被追加:
浮动框区的上外边界(top margin edge)必须低于前面所有左浮框的下外边界(在clear:left时),或者右浮框区(clear:right),或者两个框区(clear:both)。

例子:

提示:你可以先修改部分代码再运行。

转载请注明:练小习的前端技术笔记 » 可视化格式模型-clear特性

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (6)

  1. 页面跳转 好使不?
    achair8年前 (2011-05-06)回复
  2. 学习了。分享到了。谢谢
    紫逸8年前 (2010-12-15)回复
  3. 不错的东西。。
    过客11年前 (2008-05-10)回复
  4. 还要做题啊
    项羽11年前 (2008-04-24)回复
  5. return 起什么作用?
    路人11年前 (2008-04-24)回复
  6. 有意思,谢谢拉。收藏了。
    9NPC11年前 (2008-04-23)回复